elementUItable过滤筛选问题
⼀、问提描述
使⽤elementUI table 官⽅筛选案例，发现筛选不是服务器端筛选，⽽是浏览器端对每⼀页进⾏单独筛选。 如何在服务器端筛选？
⼆、查询Element UI 官⽹table组件发现：
1、Afilter-change事件，说明：当表格的筛选条件发⽣变化的时候会触发该事件，参数的值是⼀个对象，对象的 key 是 column 的 columnKey，对应的 value 为⽤户选择的筛选条件的数组。参数：filters。
2、 prop属性，说明：对应列内容的字段名，也可以使⽤ property 属性。类型 string
3、filters属性，说明：数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。类型 Array[{test,value}]
4、column-key属性，说明：column 的 key，如果需要使⽤ filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 类型：string
三、⽤法描述
1.在 el-table 标签 @filter-change="handleFilterChange" ，
2. 在vue周期函数methods: {}中实现
handleFilterChange ⽅法：可以监听整个table中过滤条件变化； --这个事件⾮常重要，这⾥它还充当了与服务器进⾏数据交互的⼊⼝。这是过滤⽅法不能提供的，因为过滤⽅法逐⾏执⾏，执⾏次数太多。
setFilter⽅法：按照服务器api需要的格式组装过滤条件；此处需要在data（{returen{ }}）中定义⼀个中间变量this.filter:[] ，⽤来保存和更新过滤条件。
getList（）⽅法：发送请求；
3 在 el-table-column 列中，当以过滤条件 :filters="userStatusNameFilters"、column-key="UserStatusName"、
prop="UserStatusName" 三者缺⼀不可，且column-key的值必须与prop⼀致，也就是必须为字段名称"。若不定义column-key的值，那么handleFilterChange （filter）返回值filter对象的名称将会是⼀个⾃动⽣成的值。
4 在data（）{return{ userStatusNameFilters: [] }} 定义数组 。如果数据是固定不变的可以在js中直接写⼊值 serStatusNameFilters: [{text：‘管理员’，value：‘管理员’}，{text：‘普通⽤户’，value：‘普通⽤户’}] 。如果数据可能有变化，需要从服务器端取值。
四、代码描述：
前端代码：
<el-table
v-loading="listLoading"
:key="tableKey"
:data="list"
:border="false"
:stripe="true"
size="small"
@filter-change="handleFilterChange"
>
<el-table-column
:filters="regionNameFilters"
column-key="RegionName"
label="⾏政区域"
prop="RegionName"
align="center"
width="120px"
/>
View Code
methods: {
// 当talbel中任何⼀列的过滤条件点击确定和覆盖时，都会触发此事件。
handleFilterChange(filters) {
// console.log(filters)
// console.log('筛选条件发⽣变化')
let row = null
let val = null
// 拷贝filters的值。
for (const i in filters) {
row = i // 保存 column-key的值，如果事先没有为column-key赋值，系统会⾃动⽣成⼀个唯⼀且恒定的名称 val = filters[i]
}
const filter = [{
row: row,
op: 'contains',
value: val
}]
// console.log(filter)
this.setFilter(filter)
},
getList() {
this.listLoading = true
var filters = []
for (var i in this.filters) {
// 去除value数组为空的值
if (this.filters[i].value && this.filters[i].value.length > 0) {
filters.push({ 'field': this.filters[i].row, 'op': this.filters[i].op, 'value': this.filters[i].value })
}
}
if (filters.length > 0) {
// 将 JavaScript 值(通常为对象或数组)转换为 JSON 字符串
this.listQuery.filters = JSON.stringify(filters)
} else {
this.listQuery.filters = null
}
this.listQuery.query = this.queryInfo
console.log(filters)
getList(this.listQuery).then(response => {
// console.log(ws);
this.list = ws
this.listLoading = false
})
},
/
/ 通过中间变量this.filters数组，保存当前table中所有列过滤条件的变化。
setFilter(filters) {
for (var i in filters) {
var filter = null
for (var j in this.filters) {
// 如果filters[i]中存在于this.filter[]相同的值，那么把当前this.filter[i]的引⽤覆盖filter的引⽤.
if (filters[i]['row'] === this.filters[j]['row']) {
filter = this.filters[j]
}
}
// 如果filter为空，即不存在相同的值，则将当前filter[i]添加到this.filter[]
if (filter == null) {
this.filters.push({ 'row': filters[i].row, 'op': filters[i].op, 'value': filters[i].value })
} else {
// 如果filter不为空，即存在相同的值。则将filter[i] 赋值给filter，本质是更新this.filter[i]的值。 filter.value = filters[i].value
filter.op = filters[i].op
}
}
// console.log(this.filters)
this.listQuery.page = 1
},
getRegionName() {
getRegionName().then(response => {
var temp = []
for (var i = 0; i < response.data.length; i++) {
temp.push({ text: response.data[i].RegionName, value: response.data[i].RegionName }) }
// console.ionNameFilters)
})
},
}
//getList、getRegionName 是对axios异步请求的封装。对应后端的⼀个api，。
View Code
table结合分页显⽰：
//element组件
<el-pagination
:current-page="listQuery.page"
:page-sizes="[10,15,20,30, 50]"
filter过滤对象数组:disabled="enumLoading"
:page-size="listQuery.limit"
:total="total"
background
layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
@current-change="handleCurrentChange" /> </div>
//变量
total: null, //共多少⾏数据
enumLoading: false,
listQuery: {
page: 1, //默认从第⼀页开始
limit: 15, //默认每页15⾏
filters: [] //存储需要过滤字段名称和值
},
//⽅法
handleSizeChange(val) {
this.listQuery.limit = val
},
handleCurrentChange(val) {
this.listQuery.page = val
},
后端代码（C#、linq实现）：
[HttpGet]
[Route("List")]
public ApiResult GetList(int page, int limit, string sort = null, string order = null, string filters = null, string query = null) {
PageModel p = new PageModel();
if (filters != null)
{
p.filters = Newtonsoft.Json.JsonConvert.DeserializeObject<Filter[]>(filters);
}
p.page = page;
p.sort = sort;
if (p.page <= 0)
{
p.page = 1;
}
if (p.rows <= 0)
{
}
var data = manage.GetQueryable().Select(d => d);
//过滤
data = data.Where(p.filters);
//搜索条件
if (query != null && query.Length > 0)
{
data = data.Where(new string[] { "UserName", "RealName" }, query);
}
//排序
if (order != "normal" && sort != null)
{
bool isAsc = order == "asc";
data = data.OrderBy(new[] { sort }, new[] { isAsc });
}
else
{
/
/默认排序
data = data.OrderBy(d => d.UserID);
}
DataModel pageData = new DataModel();
pageData.page = p.page;
ApiResult result = new ApiResult();
result.success = true;
result.data = pageData;
return result;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论