还原

src/components/Page/standardOption.vue

+<template>
+  <div class="page-data">
+    <div class="page-box">
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <el-card class="box-card" shadow="never">
+            <el-input
+              v-model="queryParams.value"
+              placeholder="输入标准关键词"
+              @keyup.enter="search()"
+            >
+              <i class="el-icon-search el-input__icon" slot="suffix"> </i>
+            </el-input>
+            <ul class="select-list">
+              <li
+                @click="selectStandard(item.value)"
+                v-for="item in standardOption"
+                :class="item.value === standard ? 'selected' : ''"
+              >
+                {{ item.label }}
+              </li>
+            </ul>
+          </el-card>
+        </el-col>
+        <el-col :span="21">
+          <el-card class="box-card" shadow="never">
+            <template v-if="$slots.tab && $slots.tab.length">
+              <!-- <div slot="header" class="clearfix"> -->
+                <div class="tabList mb10">
+                  <slot name="tab"> </slot>
+                <!-- </div> -->
+              </div>
+            </template>
+            <slot> </slot>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+// import request from '@/utils/request'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'standardOption',
+  props: {
+    total: {}
+  },
+  data() {
+    return {
+      queryParams: {
+        value: '',
+        pageNum: 1,
+        pageSize: 99
+      },
+      standardOption: [
+        { label: '标准库选项1', value: '1' },
+        { label: '标准库选项2', value: '2' },
+        { label: '标准库选项3', value: '3' },
+        { label: '标准库选项4', value: '4' },
+        { label: '标准库选项5', value: '5' },
+        { label: '标准库选项6', value: '6' }
+      ]
+    }
+  },
+  created() {},
+  computed: {
+    ...mapGetters(['standard'])
+  },
+  methods: {
+    search() {
+      this.queryParams.pageNum = 1
+      this.loadData()
+    },
+    selectStandard(value) {
+      this.$store.dispatch('standard/setStandard', value)
+    },
+    loadData() {
+      this.loading = true
+      //   request({
+      //     url: this.listUrl,
+      //     method: 'post',
+      //     data: this.queryParams
+      //   })
+      //     .then(res => {
+      //       if (res.code === 200) {
+      //         console.log(res.rows);
+      //         this.tableData = res.rows
+      //         this.total = res.total
+      //       }
+      //       this.loading = false
+      //     })
+      //     .catch(error => {
+      //       if (error.msg) {
+      //         this.$message.error(error.msg)
+      //       }
+      //       this.loading = false
+      //     })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.page-box {
+  padding: 1.5rem 2rem;
+  font-size: 16px;
+}
+.box-card {
+  min-height: 80vh;
+  // background-color: #000;
+}
+.header {
+  font-size: 16px;
+  font-weight: 500;
+}
+.page-title {
+  padding: 15px;
+  // background-color: #f9f9f9;
+  // background-color: #999;
+  width: 100%;
+  box-shadow: 0 0 4px #cccccc;
+}
+
+.select-list {
+  list-style-type: none;
+  padding: 0;
+  li {
+    margin: 1rem 0;
+    cursor: pointer;
+    font-size: 14px;
+    color: rgb(102, 102, 102);
+    width: 100%;
+    overflow: hidden; //超出的文本隐藏
+    text-overflow: ellipsis; //溢出用省略号显示
+    white-space: nowrap; // 默认不换行；
+  }
+  .selected {
+    color: $--color-primary;
+    font-weight: bold;
+  }
+}
+</style>

src/store/modules/standard.js

+
+const standard = {
+  namespaced: true,
+  state: {
+    standard: ''
+  },
+
+  mutations: {
+    SET_STANDARD: (state, standard) => {
+      state.standard = standard
+    },
+  },
+
+  actions: {
+    setStandard({ commit }, standard) {
+        commit('SET_STANDARD', standard)
+    }
+  }
+}
+
+export default standard