Function description: When you want to change the table header, click the table header, popup box, select the option to display or check the option to hide to control the table header display and hide

The specific functions are as follows:

Define a table table and a dialog box in HTML that displays all table header options

Word-wrap: break-word! Important;" > < span style=" max-width: 100%; border-@header-click ="contextmenu" > <el-table-column V-if ="colData[0]. Istrue "label=" value01" /> <el-table-column v-if="colData[1]. Istrue "label=" value 2" prop="value02" /> <el-table-column v-if="colData[2]. Istrue" Label ="value 3" prop="value03" /> </el-table> // Pop <el-dialog title=" list options "width="30%" :visible. Sync ="dialogVisible" :close-on-click-modal="false" > <el-checkbox-group v-model="colOptions"> <el-checkbox v-for="(item,index) in colSelect" :key="index" style="margin-right:20px" :label="item" /> </el-checkbox-group> </el-dialog>Copy the code

Js data defines the parameters used in HTML

Data () {return {// table header option dialog box dialogVisible: false, // right-click menu show and hide // all columns colOptions: [' value 1', 'value 2',' value 3'], // select the selected column colSelect: [' value 1', 'value 2',' value 3'], // select the selected column, that is, the column displayed in the table. [{title: 'value 1', istrue: true}, {title:' value 2', istrue: true}, {title: 'value 3', istrue: true}], [{value01: '1', value02: 'value 2, value03: value' 3 '}, {value01: '1', value02: 'value 2, value03: value' 3 '}]}},Copy the code

Contextmenu (), contextMenu (), contextMenu ()

Contextmenu (row, event) {this.dialogVisible = true console.log(event, row)}, contextMenu (row, event) {this.dialogVisible = true console.log(event, row)},Copy the code

In JS watch, change the display and hiding of the table header by listening to the change of the option in the pop-up box

/ / listening watch: {colOptions(newVal, oldVal) {if (newVal) {// If a value changes, Var arr = this.colself. filter(I => newval.indexof (I) < 0) // Filter items in colData to control the display and hiding of the header this.colData.filter(i => { if (arr.indexOf(i.title) ! == -1) { i.istrue = false } else { i.istrue = true } }) } } },Copy the code