Example code for implementing dynamic column filtering in vue+element table
|
Requirement: When displaying data in a list, there are many items of information that need to be displayed, which makes the table very long horizontally. The display is not clear enough, and users may feel that they cannot grasp the key points when using it. Imagine implementation: the user manually selects whether to hide or display the columns of the table, and the user's selection status is recorded, and the selection status is retained the next time the user enters the table. The effect diagram is as follows: Original:
Uncheck the default if you don’t need it:
Implementation code: <el-popover placement="right" title="Column filter" 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" />List item display filter</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="Basic information of employees"> <el-table-column v-if="colData[0].istrue" align="center" prop="user_id" label="Work No." 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="age" width="60"></el-table-column> <el-table-column v-if="colData[3].istrue" align="center" prop="gender" label="Gender" width="80"></el-table-column> <el-table-column v-if="colData[4].istrue" align="center" prop="department" label="Department Name" width="100"></el-table-column> </el-table-column> ...... The data part where js data is stored
//List dynamic hiding colData: [
{ title: "Work Number", istrue: true },
{ title: "Name", istrue: true },
{ title: "Age", istrue: true },
{ title: "Gender", istrue: true },
{ title: "Department Name", istrue: true },
],
checkBoxGroup: [],
checkedColumns: [],js method implementation part
created() {
// Column filtering 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)
})
}
},
// Monitoring column hide watch: {
checkedColumns(val,value) {
let arr = this.checkBoxGroup.filter(i => !val.includes(i)); // Unchecked localStorage.setItem(this.colTable, JSON.stringify(arr))
this.colData.filter(i => {
if (arr.indexOf(i.title) != -1) {
i.istrue = false;
} else {
i.istrue = true;
}
});
}
},This will make it possible, and the selected status will be recorded when refreshing the page. I originally wanted to add a select all selection box, but it was not implemented in the end. Let's use it this way first. But there must be a better way, I will update it after optimizing it~ This concludes this article about the sample code for implementing dynamic column filtering in vue+element table. For more content on dynamic column filtering in element table, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Simple usage example of vue recursive component
>>: Two ways to introduce svg icons in Vue
Recommend
Detailed explanation of the spacing problem between img tags
IMG tag basic analysis In HTML5, the img tag has ...
How to track users with JS
Table of contents 1. Synchronous AJAX 2. Asynchro...
A thorough understanding of js native syntax prototype, __proto__ and constructor
Table of contents 1 Introduction 2 Prerequisites ...
A method of making carousel images with CSS3
Slideshows are often seen on web pages. They have...
How much data can be stored in a MySQL table?
Programmers must deal with MySQL a lot, and it ca...
A brief discussion on MySql views, triggers and stored procedures
view What is a view? What is the role of a view? ...
How to create a stored procedure in MySQL and add records in a loop
This article uses an example to describe how to c...
VMware Workstation 14 Pro installation and activation graphic tutorial
This article shares the installation and activati...
Reasons and methods for Waiting for table metadata lock in MySQL
When MySQL performs DDL operations such as alter ...
Conflict resolution when marquee and flash coexist in a page
The main symptom of the conflict is that the FLASH...
Some notes on mysql create routine permissions
1. If the user has the create routine permission,...
Analysis of the use and principle of Docker Swarm cluster management
Swarm Cluster Management Introduction Docker Swar...
In-depth explanation of the failure of writing SQL containing English single quotation marks "''"
I have encountered a problem. When testing the ed...
How to deploy gitlab using Docker-compose
Docker-compose deploys gitlab 1. Install Docker I...
Why is the scroll bar on the web page set on the right?
Why are the scroll bars of the browsers and word ...