vue+element 实现通过控制checkbox让el-ta

本人初级前端渣渣，最开始拿到这个需求的时候走了很多弯路，在网上查阅了很多资料，看了很多别人写的demo，但是没有找到一种适合的，后来看到了csdn上一位博主做的类似的案例，地址https://blog.csdn.net/xingbipai5492/article/details/89705665

该实现方式是把循环column的值的lebel push进checkbox数据绑定的数组 然后el-table-column循环该数组得到列的label值 当checkbox选中或不选的时候便能控制绑定的数组里的值，同时列的值也受到影响，从而实现显示或隐藏。

代码 ：

 methods:{
            //表头处理
            headTable(){
                for(let i=0;i<this.col.length;i++){
                    this.formThead.push(this.col[i].label);
                }
            },
--------------------- 
作者：Eliano 
来源：CSDN 
原文：https://blog.csdn.net/xingbipai5492/article/details/89705665 

但是我是使用该方法时列表里的数据却不能显示，原因是因为循环el-table-column时循环的数组里并没有prop值，但是如果在push进该数组数据的时候把prop也带上，checkbox就会受到影响，陷入一个尴尬的境地。

不过受到这位博主启发，选择了另外的方式：

//html代码
<!-- checkbox -->
 <el-popover placement="bottom" title="选择要显示的列" width="200" trigger="click">
        <el-checkbox-group v-model="formThead">
          <el-checkbox
            v-for="(item,index) in tableConfig.col"
            :label="item.label"
            :key="index"
          >{{item.label}}</el-checkbox>
        </el-checkbox-group>

        <el-button slot="reference" size="small">自定义显示列</el-button>
      </el-popover>
 <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      row-key="id"
      align="center"
      highlight-current-row
      :default-sort="{prop: 'tag', order: 'descending'}"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" width="50" align="center"></el-table-column>
      <template v-for="(item, index) in col">
        <el-table-column
          show-overflow-tooltip="true"
          sortable
          align="center"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          v-if="formThead.includes(item.label)"
        ></el-table-column>
      </template>
    </el-table>

//js代码
<script>
const arr = ["姓名", "年龄", "身高", "体重", "地址"];
export default {
  data() {
    return {
        col: [
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "年龄",
          prop: "age"
        },
        {
          label: "身高",
          prop: "height"
        },
        {
          label: "体重",
          prop: "weight"
        },
        {
          label: "地址",
          prop: "address"
        }
      ],
      tableData: [
       {
          name: "faker",
          age: "dclass",
          height:"175",
          weight:"60",
          address:"北京"         
        },
       {
          name: "faker",
          age: "dclass",
          height:"175",
          weight:"60",
          address:"北京"         
        },
       {
          name: "faker",
          age: "dclass",
          height:"175",
          weight:"60",
          address:"北京"         
        },
       {
          name: "faker",
          age: "dclass",
          height:"175",
          weight:"60",
          address:"北京"         
        },
      ],
      formThead: arr
    },
    methods: {}
  }
}
</script>

使用v-if 通过判断formThead是否有对应的label实现对应列的显示或隐藏
方法并不难 但是对于我这种初级渣渣要想到还是有些困难(lll￢ω￢)。

效果如下

1557456150(1).jpg