vue实现checkbox点击选择控制element-ui table表单动态列展示与隐藏

要实现的效果：

 实现的代码：

首先是数据准备：

复选框数据：

const tradeSelections = [
  {eng:'tradetype', name:"交易类型"},
  {eng:'ordertype', name:"下单类型"},
  {eng:'dealnum', name:"成交数量"},
  {eng:'dealprice', name:"成交价"},
  {eng:'dealline', name:"成交额"},
  {eng:'entrustnum', name:"委托数量"},
  {eng:'entrustprice', name:"委托价格"},
  {eng:'cpl', name:"平仓盈亏"},
  {eng:'charge', name:"手续费"},
];

这里面之所以写成对象，是因为eng是为了拿到值，因为tableData里面要根据eng的的值去拿到真正的value值，eng就是key，

name就是为了渲染复选框和table表格的表头值，他们都是使用中文。

表格数据： 

data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          time: "9:00",
          city: "螺纹钢",
          tradetype: "开多",
          ordertype: "市价单",
          dealnum: 100,
          dealprice: 90000,
          dealline: 10000,
          entrustnum: 888,
          entrustprice: 999,
          cpl: "0.33%",
          charge: 10,
        },
        {
          date: "2016-05-02",
          time: "9:00",
          city: "螺纹钢",
          tradetype: "开多",
          ordertype: "市价单",
          dealnum: 100,
          dealprice: 90000,
          dealline: 10000,
          entrustnum: 888,
          entrustprice: 999,
          cpl: "0.33%",
          charge: 10,
        },
        {
          date: "2016-05-02",
          time: "9:00",
          city: "螺纹钢",
          tradetype: "开多",
          ordertype: "市价单",
          dealnum: 100,
          dealprice: 90000,
          dealline: 10000,
          entrustnum: 888,
          entrustprice: 999,
          cpl: "0.33%",
          charge: 10,
        },
        {
          date: "2016-05-02",
          time: "9:00",
          city: "螺纹钢",
          tradetype: "开多",
          ordertype: "市价单",
          dealnum: 100,
          dealprice: 90000,
          dealline: 10000,
          entrustnum: 888,
          entrustprice: 999,
          cpl: "0.33%",
          charge: 10,
        },
      ],
      key: 1, // table key
      checkList: [],//被选中的选项eng数组
      formThead: [],//渲染的表头
      tradeSelections,
    };
  },

渲染数据：

//复选框
<div class="checkbox_group">
      <el-checkbox-group v-model="checkList" @change="changeOptions">
        <el-checkbox
          v-for="(item, index) in tradeSelections"
          :label="item.eng"
          :key="index"
        >{{item.name}}</el-checkbox>
      </el-checkbox-group>
</div>
//table表格
<el-table
      :key="key"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column property="date" label="委托日期"> </el-table-column>
      <el-table-column property="time" label="时间"> </el-table-column>
      <el-table-column property="city" label="标的"> </el-table-column>
      <el-table-column v-for="(item,index) in formThead" :key="index" :label="item.name">
        <template slot-scope="scope">
          {{ scope.row[item.eng] }}
        </template>
      </el-table-column>
 </el-table>

对复选框进行监控：

watch: {
    checkList(val) {
      this.formThead = this.tradeSelections.filter(i => val.indexOf(i.eng) >= 0)//挑选被选中的对象
      this.key = this.key + 1//为了保证table 每次都会重渲，这样做体验感更好，如果不为table设置key值的话，用户一旦选中了复选框选项，就是在原来table基础上添加删除每一列，页面就有跳动的感觉，体验感不好
    }
  },

checkList里面是：

只包含eng的值，所以要对tradeSelections进行过滤，找到被选中的对象，push到即将被循环的数组里面。

还没明白的，自己可以动手试一试。

这样就实现了此功能。如有更好的办法，欢迎探讨！

参考文章：https://blog.csdn.net/qq_36410795/article/details/89920379