vue el-table 表头搜索(筛选)功能 头部添加搜索icon 点击重置按钮,重置对应字段的筛选条件(三)
如果在数据筛选时对原始数据进行操作,那么想重置该筛选条件的话,就需要重新获取数据(刷新页面)不合理,需要实现重置某筛选条件的功能。组件内部的重置按钮click方法<el-button size="mini" @click="resetData">重置</el-button>将组件input框中的数据清空, 组件改为隐藏, 修改icon颜色,触发父组件的resetChange
·
如果在数据筛选时对原始数据进行操作,那么想重置该筛选条件的话,就需要重新获取数据(刷新页面)
不合理,需要实现重置某筛选条件的功能。
组件内部的重置按钮click方法
<el-button size="mini" @click="resetData">重置</el-button>
将组件input框中的数据清空, 组件改为隐藏, 修改icon颜色,触发父组件的resetChange方法
resetData () {
console.log('reset')
this.value = ''
this.visible = false
this.iconColor = false
const self = this
self.$emit('resetChange', { type: self.type, value: self.value, tableType: self.tableType })
},
实现逻辑如下:
- 请求接口获取数据,加载到table,并且保存一个数据备份
- 搜索时,筛选出符合条件的数据,并且记录筛选条件
- 重置时,先将重置的这个条件从rules中删除,再用备份的数据,用剩下的条件过滤
- 修改table的data
// 选择框回调
selectChange (data) {
console.log('回调', data)
// 自定义筛选框返回数据进行过滤添加到tableData数组中
const type = data['type']
const value = data['value']
this.rules[type] = value
if (value !== '' && type !== '') {
this.tableDataDeal = this.tableDataDeal.filter(item =>
item[type]
.toString()
.toLowerCase()
.includes(value.toString().toLowerCase())
)
}
},
// 重置回调
resetChange (data) {
console.log('重置回调', data)
delete this.rules[data['type']]
var tmpData = this.tableDataDealCopy
for (const key in this.rules) {
tmpData = tmpData.filter(item =>
item[key]
.toString()
.toLowerCase()
.includes(this.rules[key].toString().toLowerCase()
)
)
}
this.tableDataDeal = tmpData
},
这样就实现了重置搜索功能
更多推荐
已为社区贡献8条内容
所有评论(0)