共计 4331 个字符，预计需要花费 11 分钟才能阅读完成。
问题形容
对于后盾管理系统，比拟常见的性能就是增删改查。对于“查”而言，筛选数据以查看是比拟常见的。饿了么 ui 中自带的有筛选性能。不过官网文档所给到的例子是“前端筛选”，意思就是写死的数据，前端过滤出来以出现。官网效果图如下：
然而理论开发中数据是后端共事动静从数据库抓取返回给前端的，所以官网案例“前端筛选”的用法用的不多，不过还是能够看看的，本篇文章次要讲一下“后端筛选”的用法步骤
这里不禁要吐槽一下官网文档写的“不接地气”
后端筛选的步骤
第一步: 搭建一个表格
<template>
<div id="app">
<el-table :data="tableData" border style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<el-table-column prop="age" label="年龄" width="180"> </el-table-column>
<el-table-column prop="gender" label="性别" width="180"> </el-table-column>
<el-table-column prop="xueli" label="学历" width="180"> </el-table-column>
<el-table-column prop="like" label="喜好" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {data() {
return {
tableData: [
{
name: "王小虎",
age: 18,
gender: "男",
xueli: "本科",
like: "打篮球",
address: "上海闵行",
},
// 省略若干表格数据......
],
};
},
};
</script>初步效果图如下：
第二步：给要筛选的某一列开启筛选性能
开启筛选其实很简略，只须要给对应列增加 filters 属性即可开启该列的筛选。filters 是一个数组，数组每一项中有两个属性 text 和 value，别离是出现的数据，和对应的标识。这里咱们先以姓名为例进行筛选
其余表格字段多条件的筛选前面再补充。
加 filters 数组写法一：间接写在标签外面（不举荐）
filters 数组如果间接写在标签外面就写死了，不是动静的了，不太举荐用这种办法。因为开发状况下，筛选条件 filters 数组的值也是从后盾获取的数据，当然如果就是相似于筛选性别的，男或女；筛选幼儿园班级，小班、中班、大班。这种固定的筛选数据写在标签外面也是能够的。不过大多数状况下都是写在办法外面的，写在办法外面就不便从后盾获取数据了
<el-table-column
prop="name"
label="姓名"
width="180"
column-key="filterTag"
:filters="[{ text: '王小虎', value: '王小虎'},
{text: '张小花', value: '张小花'},
{text: '赵小二', value: '赵小二'},
{text: '钱大牛', value: '钱大牛'},
]"
></el-table-column>加 filters 数组写法二：数组写在办法 methods 外面（举荐）
// html 局部
<el-table-column
prop="name"
label="姓名"
width="180"
:filters="getfilterNameItem()"
></el-table-column>
//js 局部
getfilterNameItem() {
let apiArr = [ // 从后端获取筛选的字段
{text: "王小虎", value: "王小虎"},
{text: "张小花", value: "张小花"},
{text: "赵小二", value: "赵小二"},
{text: "钱大牛", value: "钱大牛"},
];
return apiArr; // return 返回去
}咱们给某一列开启筛选性能当前，在那一列上的表头就主动会呈现对应的一个下拉小箭头，点击就会呈现对应筛选项，勾选筛选或者重置清空，如下图：
第三步：加上 filter-change 监听办法
到这里点击筛选或者重置，没啥反馈，因为还不够，咱们还须要加一个办法 filter-change，这个办法官网介绍如下：
filter-change 这个办法能够监听筛选项的变动，在用户点击筛选或者重置小按钮的时候会触发，咱们加上当前看看有啥变动（加在 el-table 标签下面）：
// html 局部
<el-table
:data="tableData"
border
style="width: 100%"
@filter-change="filterChange"
>
</el-table>
// js 局部
filterChange(filterObj) {console.log(filterObj);
}点击筛选或者重置的时候打印看看会产生什么变动
应用官网文档提供的 column-key 批改一下
<!-- column-key="filterTag" 这个要配一下，相当于起了个别名，通过这个别名能够拜访到变动的对象 -->
<el-table-column
prop="name"
label="姓名"
width="180"
column-key="filterTag"
:filters="getfilterNameItem()"
></el-table-column>最终就变成这样的了：
第四步：在 filter-change 的回调函数中做相应解决
点击筛选
点击重置
这样的话，就能够带着筛选参数发申请或者清空重置啦 …
补充多条件筛选
如果表格想要多条件筛选其实也很简略，比方要再加一个筛选性别。只须要在性别那一列再加上一个
column-key 和 filters（每一列的 column-key 的值都不能雷同），同时在 filter-change 的回调中判断一下。个人感觉如果要多条件筛选，这样写会不太优雅。
<el-table-column
prop="gender"
label="性别"
column-key="filterSex"
:filters="[{ text: '男', value: '男'},
{text: '女', value: '女'},
]"width="180"
>如果是多条件筛选，倡议把筛选项写在外边，就不写在表格外面了。对应的步骤参见我的另一篇博客：
vue 仿写 teambition 的筛选性能（应用饿了么 UI）https://segmentfault.com/a/11…
最初附上案例中的残缺代码：
<template>
<div id="app">
<el-table
:data="tableData"
border
style="width: 100%"
@filter-change="filterChange"
>
<el-table-column
prop="name"
label="姓名"
width="180"
column-key="filterTag"
:filters="getfilterNameItem()"
></el-table-column>
<!-- column-key="filterTag" 这个要配一下，相当于起了个别名，通过这个别名能够拜访到变动的对象 -->
<el-table-column prop="age" label="年龄" width="180"> </el-table-column>
<el-table-column prop="gender" label="性别" width="180">
</el-table-column>
<el-table-column prop="xueli" label="学历" width="180"> </el-table-column>
<el-table-column prop="like" label="喜好" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {data() {
return {tableData: [],
};
},
mounted() {
// 发申请获取表格的数据
this.getTableData();},
methods: {
// 获取表格的数据
getTableData() {
let apiTableData = [
{
name: "王小虎",
age: 18,
gender: "男",
xueli: "本科",
like: "打篮球",
address: "上海闵行",
},
{
name: "张小花",
age: 28,
gender: "女",
xueli: "本科",
like: "画画",
address: "上海松江",
},
{
name: "赵小二",
age: 28,
gender: "男",
xueli: "研究生",
like: "航空航天",
address: "上海普陀",
},
{
name: "钱大牛",
age: 28,
gender: "男",
xueli: "研究生",
like: "航空航天",
address: "上海奉贤",
},
];
this.tableData = apiTableData;
},
// 获取筛选的字段
getfilterNameItem() {
let apiArr = [
// 发申请获取筛选项的数据
{text: "王小虎", value: "王小虎"},
{text: "张小花", value: "张小花"},
{text: "赵小二", value: "赵小二"},
{text: "钱大牛", value: "钱大牛"},
];
return apiArr;
},
// 监听筛选项的变动
filterChange(filterObj) {console.log(filterObj.filterTag);
if (filterObj.filterTag.length > 0) {console.log("点击筛选");
} else {console.log("点击重置");
}
},
},
};
</script>
<style lang="less" scoped>
#app {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding: 20px 0 0 20px;
}
</style>
