vue+element实现表格动态加载

vue+element实现表格动态加载

先说明需求：通过选择多选框中的选项，点击确定，动态加载展示的表格头部。
分类：给定的可以展示的数据是什么样的
第一种，选项对应的prop和label是分开给的，比如：

checkList:[ '客户端主机名','客户端主机IP','起始时间','结束时间','日志级别']
key: ['startTime','endTime','level','queryId','sqlString']
checked: [ ]

第二种是整合在一起的，比如：

options: [
        {
          prop: 'StartDate',
          label: '开始日期'
        }, {
          prop: 'endDate',
          label: '结束日期'
        }, {
          prop: 'grade',
          label: '级别'
        }, {
          prop: 'searchID',
          label: '查询id'
        }
        ]

第二种比较方便，多选框直接遍历options就行，lable绑定的值就是这个选项对应的值，注意不是value绑定的哦。可以{{checked}}展示一下，你会发现，绑定的数据就是“{ prop: startDate , label: ‘开始时间’ }”，多选框v-model的是个数组哦，所有选中的选项都会放在checked里面。

<el-checkbox-group v-model="checked">
        <el-checkbox v-for="item in options" :key="item.prop" :label="item" :value="item.prop">{{ item.label }}</el-checkbox>
</el-checkbox-group>

这种方法绑定的事件处理程序也很简单，确定按钮事件叫addColumn。

addColumn() {
      this.checked.forEach(item => {
        this.columns.push(JSON.parse(JSON.stringify(item)))
      })
  }

接下来是第一种，相比之下比较复杂，但是道理一样。此时选项的遍历变成了这样,与上面最直接的区别就是check中的数据变成了[ '开始时间 ', '结束时间 ', ‘主机名称’]，单独的一个属性没法遍历出el-table-column啊，所以看下面

<el-checkbox-group v-model="checked">
        <el-checkbox v-for="(item,index) in options" :key="index" :label="item" :value="item"></el-checkbox>
</el-checkbox-group>

我们首先要将两个单独的数组整合到一块，因为表格要绑定prop和label这两个属性啊。方法如下：

// 申明一个数组用来存放所有对应数据
const sumArr = []
   // 将单独给的两组数据处理成拥有prop 和 label 属性的对象集合
       for (let i = 0; i < this.key.length; i++) {
         sumArr.push({ prop: this.key[i], label: this.checkList[i] })
       }
       // 由于checked中变成了'开始时间'这种字符串，所以我们遍历出一样的，还把对应的prop拿出来，放在column里，
       this.checked.forEach(I => {
          sumArr.forEach(item => {
            if (I === item.label) {
              this.columns.push({ prop: item.prop, label: item.label })
            }
          })
         })

现在遍历columns中的数据就能动态展示啦

<el-table :data="tableData" style="width: 100%">
      <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" />
</el-table>

最终实现的效果就是，先勾选要展示的选项，点击确定，表格头部对应显示。