Because the project need, we always pull out a list of the background data found that list last very long, even if is to use the form of fluid width, or a little more, and also look not convenient, so this time, one can change column form has become the first choice, let us in operation and convenient many view the data. As usual, I’ll show you the picture above.

As shown in the figure, we have cancelled the selection of date and status columns, and the icon column followed by the details is our icon column. Is this operation still ok? This page is not packaged as a component, but the data is based on the previous header data, interested students can be further packaged into components, aesthetics can also be adjusted. Let’s take a look at our layout.

<template> <div class="pages-container"> <el-row> < EL-col :span="2"> <el-popover placement="bottom" title=" Filter table" Trigger ="click"> <el-checkbox-group V-model ="checkList" @change="changeCheck"> Add a show Boolean state to each header data <ul class="checkList"> <li V-for ="(item,index) in tableHeader"><el-checkbox :label="item.label" :key="index">{{item.label}}</el-checkbox></li> </ul> </el-checkbox-group> <el-button type="primary" Size ="mini" slot="reference"> Advanced filter </el-button> </el-popover> </el-col> < EL-col :span="22"> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label=" approver "> <el-input v-model=" forminline.user" Placeholder =" approver "></el-input> </el-form-item> <el-form-item label=" active region" >< el-select V-model =" forminline.region" Placeholder =" active ">< el-option label=" Shanghai "value=" Shanghai "></el-option> <el-option label=" Shanghai" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" </el-form> </el-form> </el-form> <dynamic table :tableHeader="tableHeader" :tableData="tableData" :config="config" @pagechange="getList($event)"> <template v-slot:handles="t"> <el-button-group> <el-link type="primary" @click="edit(t)" icon="el-icon "> </el-link> <el-link type="danger" @click="deleteId(t)"> delete < I class="el-icon-delete el-icon--right"></ I ></ el-link> </el-button-group> </template> </dynamic-table> </el-col> </el-row> </div> </template>Copy the code

Let’s start with a two-column layout. In order to make it easy to view, we will display it in Popover mode first. When applied to the project, you can make a better display mode. Since our checkboxes are looping out based on our table header data, we look at our table header data

// We can see that each header property adds a show state, Export const tableHeader = [{show:false, Type :'selection',// render table row data type width:'55',// table column width:'55',// table column name align:'center',// table column data fixed:false,}, {show:false, prop:'createAdress',// label:' address ',// width:'200', align:'center',//Copy the code

We then make a conditional judgment on the traversal of the table component

<! <template> <div> <el-table class="customer" :data="tableData" style="width: 100%"> <template v-for="(col,index) in tableHeader"> <template v-if="col.show"> <! <el-table-column v-if="col.type == 'selection'" :label="col.label" :type="col.type" :width="col.width"></el-table-column> <! </template> </template> </el-table> <pagination v-show="config.total>0" :total="config.total" v-on="$listeners" :page.sync="config.searchList.page" :entry.sync="config.searchList.pageSize" /> </div> </template>Copy the code

Select * from ‘show’; select * from ‘show’; select * from ‘show’; select * from ‘show’

// Because of the previous code demonstration, the code that does not need to be used here has been deleted, Import {tableHeader} from './ conconst. Js' export default {data() {return {tableHeader: tableHeader, checkList:[], } }, mounted() { this.configColumn(); }, methods: {// Add a selected state to show in all table headers. ConfigColumn (){this.checklist = []; configColumn(){this.checklist = []; this.tableHeader.forEach((item,index)=>{ item.show = true; This.checklist. Push (item.label)})}, // When we change the selection, we filter and find the data that is not selected, return it to the //result array, and then go through the table header to find the woman that meets the criteria. ChangeCheck (val) {if(val.length>0){var result = this.tableheader. filter(item=>{return }) this.tableheader. forEach((all,index) => {if(result.find(). nochecked => all.label === nochecked.label)){ all.show = false; }else{ all.show = true; }})}; } } } </script>Copy the code

The basic idea is written in the code comments. At this point, we are complete with a list of column state display capabilities, to implement our own local filtering, convenient for you and me. Feel useful to your small partner, trouble to a careful heart, code text is not easy, to praise it, thank you!