vue:使用element-ui制作动态表格

参考;

https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/dynamic-table/components/FixedThead.vue

一、制作下拉多选框

        <el-dropdown :hide-on-click="false" trigger="click">
          <el-button size="small" icon="el-icon-s-grid">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-checkbox-group v-model="checkboxVal">
              <el-dropdown-item>
                <el-checkbox label="mLatinName">药材拉丁名</el-checkbox>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-checkbox label="mOriginName">基源名称</el-checkbox>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-checkbox label="mOriginLatinName">基源拉丁名</el-checkbox>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-checkbox label="mMethod">药用部位</el-checkbox>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-checkbox label="mOriginInterview">基源简介</el-checkbox>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-checkbox label="mRemarks">药材简介</el-checkbox>
              </el-dropdown-item>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>

二、表格中主要代码

        <el-table-column prop="mName" label="药材名称" width="80"></el-table-column>
        <el-table-column v-for="item in formThead" :key="item" :label="test[item]">
          <template slot-scope="scope">{{ scope.row[item] }}</template>
        </el-table-column>

三、设置要动态显示的表头

const defaultFormThead = [
  "mLatinName",
  "mOriginName",
  "mOriginLatinName",
  "mMethod",
  "mOriginInterview",
  "mRemarks"
];

// 对应的中文名，用于给label赋值
const test = {
  "mLatinName":"药材拉丁名",
  "mOriginName":"基源名称",
  "mOriginLatinName":"基源拉丁名",
  "mMethod":"药用部位",
  "mOriginInterview":"基源简介",
  "mRemarks":"药材简介"
  }

四、data中的值

export default {
  data() {
    return {
      key: 1,
      formTheadOptions: [
        "mLatinName",
        "mOriginName",
        "mOriginLatinName",
        "mMethod",
        "mOriginInterview",
        "mRemarks"
      ],
      test: test,
      checkboxVal: defaultFormThead, // checkboxVal
      formThead: defaultFormThead // 默认表头 Default header
    };
  },

五、methods:

  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      );
      this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },