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

渲染数据：

//复选框

      
        {{item.name}}
      

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