前言
实现效果
提示：代码段太简单就不解释了，自己看代码自己更改，下面代码直接无脑复制更改就行
一、实现代码？
查看编辑选择显示字段日期姓名省份市区地址邮编保存列配置export default {data() {return {isShowColumn: false,tableData: [{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-04",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1517 弄",zip: 200333,},{date: "2016-05-01",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1519 弄",zip: 200333,},{date: "2016-05-03",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1516 弄",zip: 200333,},],// 列的配置化对象，存储配置信息checkList: {},showColumn: {date: true,name: true,provinces: true,city: true,adreess: true,zipCode: true,},};},watch: {// 监听复选框配置列所有的变化checkList: {handler: function (newnew, oldold) {// console.log(newnew); this.showColumn = newnew;// 这里需要让表格重新绘制一下，否则会产生固定列错位的情况this.$nextTick(() => {this.$refs.table.doLayout();});},deep: true,immediate: true},},mounted() {// 发请求得到checkListInitData的列的名字if(localStorage.getItem("columnSet")){this.checkList = JSON.parse(localStorage.getItem("columnSet"))}else{this.checkList = {date: true,name: true,provinces: true,city: true,adreess: true,zipCode: true,};}},methods: {handleClick(row) {console.log(row);},showColumnOption() {this.isShowColumn = true;},saveColumn() {localStorage.setItem("columnSet",JSON.stringify(this.checkList))this.isShowColumn = false;},},};.columnOption {position: fixed;z-index: 20;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);display: flex;flex-direction: row-reverse;.content {width: 100px;height: 100%;background-color: rgb(203, 223, 198);.head {width: 100%;height: 44px;border-bottom: 1px solid #000;display: flex;justify-content: center;align-items: center;font-size: 12px;}.body {width: 100%;height: calc(100% - 88px);box-sizing: border-box;padding-top: 10px;overflow-y: auto;.items {width: 100%;height: 100%;overflow-y: auto;display: flex;flex-direction: column;.el-checkbox {width: 100%;height: 28px;line-height: 28px;margin-bottom: 14px;display: inline-block;font-family: PingFang SC;font-style: normal;font-weight: normal;font-size: 14px;color: #000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;box-sizing: border-box;padding-left: 14px;}.el-checkbox:hover {background-color: #f5f7fa;}}}.footer {width: 100%;height: 44px;border-top: 1px solid #000;display: flex;justify-content: center;align-items: center;}}}// 控制淡入淡出效果.fade-enter-active,.fade-leave-active {transition: opacity 0.3s;}.fade-enter,.fade-leave-to {opacity: 0;}