Vue+element table realizes dynamic column filtering

Requirement: When displaying data in a list, there are many items of information that need to be displayed, resulting in a particularly long table horizontally, and the display is not clear enough. Users may feel that they cannot grasp their own key points when using it.
Imagine realization: the user manually selects whether to hide or display the columns of the table, and records the state of the user's selection, and the state of selection will still be retained when entering the column next time.
The effect picture is as follows:
Original:
Unnecessary turn off the default check:

Implementation code:
The HTML part is to use a multi-select box component to display the column options,
use v-if="colData[i].istrue"the control to display and hide, pass the column options to the checkbox and then bind the check event.

<el-popover placement="right" title="列筛选" trigger="click" width="420">                        
	<el-checkbox-group v-model="checkedColumns" size="mini">
		<el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
	</el-checkbox-group>
	<el-button slot="reference" type="primary" size="small" plain><i class="el-icon-arrow-down el-icon-menu" />列表项展示筛选</el-button>
</el-popover>

<el-table :data="attendanceList" @sort-change="sort" highlight-current-row :row-class-name="holidayRow" @selection-change="editAll" ref="multipleTable">
	<el-table-column type="selection" width="55" align="center"></el-table-column>
		<el-table-column label="员工基本信息">
		<el-table-column v-if="colData[0].istrue" align="center" prop="user_id" label="工号" width="80" fixed></el-table-column>
		<el-table-column v-if="colData[1].istrue" align="center" prop="name" label="姓名" width="80" fixed></el-table-column>
		<el-table-column v-if="colData[2].istrue" align="center" prop="age" label="年龄" width="60"></el-table-column>
		<el-table-column v-if="colData[3].istrue" align="center" prop="gender" label="性别" width="80"></el-table-column>
		<el-table-column v-if="colData[4].istrue" align="center" prop="department" label="部门名称" width="100"></el-table-column>
	</el-table-column>
	......

The data part of js data storage

	//列表动态隐藏
	  colData: [
	      {
    
     title: "工号", istrue: true },
	      {
    
     title: "姓名", istrue: true },
	      {
    
     title: "年龄", istrue: true },
	      {
    
     title: "性别", istrue: true },
	      {
    
     title: "部门名称", istrue: true },	     
	  ],
	  checkBoxGroup: [],
	  checkedColumns: [],

js method implementation part

created() {
    
                
	    // 列筛选
	    this.colData.forEach((item, index) => {
    
    
	        this.checkBoxGroup.push(item.title);
	        this.checkedColumns.push(item.title);
	    })
	    this.checkedColumns = this.checkedColumns
	    let UnData = localStorage.getItem(this.colTable)
	    UnData = JSON.parse(UnData)
	    if (UnData != null) {
    
    
	        this.checkedColumns = this.checkedColumns.filter((item) => {
    
    
	            return !UnData.includes(item)
	        })
	    }
	},
  // 监控列隐藏
  watch: {
    
    
      checkedColumns(val,value) {
    
    
          let arr = this.checkBoxGroup.filter(i => !val.includes(i)); // 未选中
          localStorage.setItem(this.colTable, JSON.stringify(arr))
          this.colData.filter(i => {
    
    
              if (arr.indexOf(i.title) != -1) {
    
    
                  i.istrue = false;
              } else {
    
    
                  i.istrue = true;
              }
          });
      }
  },

In this way, it can be realized, and the check situation will be recorded when the page is refreshed. I originally wanted to add a selection box for all selections, but it was not realized in the end. Let's use it like this first. But there must be a better way, and it will be updated after optimization~

Vue+element table realizes dynamic column filtering

Guess you like