vue: using element-ui to create dynamic form

reference;

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

First, make Colorado the next box

        <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>
                <herbs Latin name>= "mLatinName"labelthe CheckBox-EL</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 " Medicinal parts></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>

Second, the main code table

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

Three, to set the dynamic display meter

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

// corresponding Chinese name, a label assignment for 
const Test = {
   "mLatinName": " herbs Latin name " ,
   " mOriginName ":" radical source name " ,
   " mOriginLatinName ":" source-based Latin name " ,
   " mMethod ":" medicinal parts " ,
   " mOriginInterview ":" radical source Profile " ,
   " mRemarks ": "Introduction to medicine" 
  }

Four, data values ​​in

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

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