1. 第一步循環 el-table-column
<el-table-column v-if="item.show" v-for="(item, index) in tableColumn" :key="index" :label="item.name" :prop="item.value" align="center" show-overflow-tooltip sortable="custom"
/>
// this.state.tableColumn:[{name: '客戶名', value: 'cusName', show: true}, {name:'年齡', value: 'age', show: true}, {name:'手機號', value: 'phone', show: false}]
2. 第二步 點擊按鈕動態添加一個(手機號)表頭
// 動態表頭保存 handleSaveSetTable() { this.$set(this.tableColumn , 2, { name:'手機號', value: 'phone', show: true }) this.flag = !this.flag } // 改變this.flag來觸發重新做diff運算渲染dom,這樣解決了一些固定表頭可能出現錯亂問題
3.第三步,在表格最外層容器添加key