Vue实现以按钮弹框动态控制Table列展示

🎈个人公众号:🎈 :✨✨ 可为编程 ✨✨ 🍟🍟
🔑个人信条:🔑知足知不足 有为有不为 为与不为皆为可为🌵
🍉本篇简介:🍉 本片详细说明了Vue实现以按钮弹框动态控制Table列展示使用规则和注意要点，并给出具体操作实例，如有出入还望指正。

关注公众号【可为编程】回复【面试】领取年度最新面试题大全!!!

点击设置弹出列数，并根据选择列进行展示：

点击勾选之后改变列表展示列

Html:

<div id="app">
    <template>
  <el-popover placement="right" width="800" trigger="click" style="margin-left:80%">
    <el-checkbox-group v-model="colOptions">
        <el-checkbox v-for="item in colSelect" :label="item" :key="item" ></el-checkbox>
    </el-checkbox-group>
    <el-button slot="reference">设置</el-button>
</el-popover>
  
 <el-table :data="tableData" stripe border style="width: 98%" ref="tableDataRef">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
      <el-table-column v-if="colData[0].istrue" prop="name" label="名称" align="center"></el-table-column>
      <el-table-column v-if="colData[1].istrue" prop="select" label="性别" align="center"></el-table-column>
      <el-table-column v-if="colData[2].istrue" prop="kafang" label="年龄" align="center"></el-table-column>
      <el-table-column v-if="colData[3].istrue" prop="fengbi" label="时间" align="center"></el-table-column>
      <el-table-column v-if="colData[4].istrue" prop="isETF" label="事件" align="center"></el-table-column>
      <el-table-column v-if="colData[5].istrue" prop="range" label="地点" align="center"></el-table-column>
 </el-table>
 

</template>
</div>

Js:

new Vue({
  el:'#app',
   data() {
      return {
        colData: [{title: "名称",istrue: true},
          {title: "性别",istrue: true},
          {title: "年龄",istrue: true},
          {title: "时间",istrue: true},
          {title: "事件",istrue: true},
          {title: "地点",istrue: true}],
colOptions: [],
colSelect: []
      }
    },
  	mounted(){
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      sortChange(val){
        const { order } = val
        console.log(order)
      }
    },
    created() {
  var _this = this;
  for (let i = 0; i < _this.colData.length; i++) {
     _this.colSelect.push(_this.colData[i].title);
    if (_this.colData[i].title == '名称') { //初始化不想展示的列可以放在这个条件里
      continue;
     }
     _this.colOptions.push(_this.colData[i].title); 
      
  }
},
watch: {
  colOptions(valArr) {
    var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
    this.colData.filter(i => {
      if (arr.indexOf(i.title) != -1) {
        i.istrue = false;
        this.$nextTick(() => {
          this.$refs.tableDataRef.doLayout();
        });
      } else {
        i.istrue = true;
        this.$nextTick(() => {
          this.$refs.tableDataRef.doLayout();
        });
      }
    });
  }
}
})

这里是一个真诚的***青年技术交流QQ群:761374713***，不管你是大学生、社畜、想学习变成的其他人员，欢迎大家加入我们，一起成长，一起进步，真诚的欢迎你，不管是技术，还是人生，还是学习方法。有道无术，术亦可求，有术无道，止于术。
欢迎感兴趣的小伙伴一起探讨学习知识，以上是个人的一些总结分享，如有错误的地方望各位留言指出，十分感谢。觉得有用的话别忘点赞、收藏、关注，手留余香！ 😗 😗 😗

欢迎大家关注【可为编程】，成长，进步，编程，技术、掌握更多知识！