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
    }
  },