El - table column filter functions, control columns show and hide (effect and easy to implement full marks)

文章目录

• 前言
• 一、Column filter function display
• • 1、avue-crud的实现效果：
  • 2、el-tableAdded column filtering functionality
• 二、实现步骤
• • 1、Add filter buttons,并给el-tableAdd each column of v-if
  • 2、Add necessary data
  • 3、Listen for changes in the checkbox,更新表格
• 总结

---

前言

I ran into an interesting problem again today：The company's management system generally displays data in tables,比较直观.In many cases, more data is displayed,Some columns do not need to be displayed,At this time, some columns need to be temporarily hidden.

在使用avue-crud框架的时候,This feature is natively supported.But when I develop,Some lists use element框架的el-table组件,Column filtering is not natively supported,It's up to you to figure it out.

I was referring to it程序媛na的方法,This function is temporarily implemented,But every filter column will cause the table to flicker,不能像avue-crud那么丝滑,So I took a lookavue-crud的源码,豁然开朗,其实很简单.The implementation method is attached below：

一、Column filter function display

1、avue-crud的实现效果：

2、el-tableAdded column filtering functionality

The first way to implement it is to refer to this article【el-tableDynamic column filtering】
I don't know if the author has encountered it The entire table flickers 的问题,I have this situation,So I rewrote the method a bit.Anyway, thanks for the ideas.

二、实现步骤

1、Add filter buttons,并给el-tableAdd each column of v-if

代码如下（示例）：

<!-- 筛选按钮 -->
<el-popover placement="bottom" title="筛选列" trigger="click" width="40">            
	<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>
	<div title="筛选列" class="filter-table-col" slot="reference"><i class="el-icon-c-scale-to-original"></i></div>
</el-popover>
<!-- 表格主体 -->
<el-table :key="reload" :data="serverData">
	<el-table-column type="selection" width="50" prop="id"></el-table-column>
    <el-table-column v-if="colData[0].istrue" prop="serverCode" label="编号" width="80px"></el-table-column>
    <el-table-column v-if="colData[1].istrue" prop="innerIp" label="内网IP" width="120px" sortable></el-table-column>
    <el-table-column v-if="colData[2].istrue" prop="isRestartStr" label="设备状态"></el-table-column>
    <el-table-column v-if="colData[3].istrue" prop="duration" label="持续时间"></el-table-column>
    <el-table-column v-if="colData[4].istrue" prop="updatetimeStr" label="更新时间"></el-table-column>
    <el-table-column v-if="colData[5].istrue" prop="sysStatusStr" label="服务状态"></el-table-column>
    <el-table-column v-if="colData[6].istrue" prop="serverStatusStr" label="工作状态"></el-table-column>
    <el-table-column v-if="colData[7].istrue" prop="allowShutDownStr" label="Please allow shutdown"></el-table-column>
    <el-table-column v-if="colData[8].istrue" prop="serverTypeStr" label="服务器类型"></el-table-column>
    <el-table-column width="180" label="操作">
       <template slot-scope="scope">
         <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">重置</el-button>
       </template>
    </el-table-column>
 </el-table>

注意：要给el-table添加:key="reload"属性,This is to actively re-render the list,Avoid components that automatically use the cache without refreshing.

2、Add necessary data

data() {
    return {
    	// colDataEach column in the table is listed in ,Displayed by default
		colData: [
	        { title: "编号", istrue: true },
	        { title: "内网IP", istrue: true },
	        { title: "设备状态", istrue: true },
	        { title: "持续时间", istrue: true },
	        { title: "更新时间", istrue: true },
	        { title: "服务状态", istrue: true },
	        { title: "工作状态", istrue: true },
	        { title: "Please allow shutdown", istrue: true },
	        { title: "服务器类型", istrue: true },
	      ],
	     ,
	  // List of checkboxes,List each column of the table
      checkBoxGroup: ["编号", "内网IP", "设备状态", "持续时间", "更新时间", "服务状态", "工作状态", "Please allow shutdown", "服务器类型"],
      // The currently selected checkbox,Represents the currently displayed column
      checkedColumns: ["编号", "内网IP", "设备状态", "持续时间", "更新时间", "服务状态", "工作状态", "Please allow shutdown", "服务器类型"]
	}
}

3、Listen for changes in the checkbox,更新表格

代码如下（示例）：

watch: {
    checkedColumns(val) {
      let arr = this.checkBoxGroup.filter(i => !val.includes(i));
      this.colData.filter(i => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
        } else {
          i.istrue = true;
        }
      });
      this.reload = Math.random()
    }
  }

重点是this.reload = Math.random()这一行代码,Fixed an issue with table flickering.

总结

以上就是今天要分享的内容,如果你的el-tableColumn filtering is also required,You can refer to the above code.

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在.深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小.自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前.因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担.添加下方名片,即可获取全套学习资料哦