VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法_前端表格第一行设置为自动过滤行(1)_前端表格怎么做过滤

:key=“listindex”
:prop=“list.prop”
:label=“list.label”
:type=“list.type”
:sortable=“list.sortable”
:width=“list.width”
:formatter=“list.formatter”

**定义data数据：**



1
2
3
4
5

data() {
return {
detailrowtabledataslist: [
{
prop: ‘orderNumber’,
label: ‘订单编号’,
sortable: true,
width: ‘120px’,
keynum: 1,
search: ‘’
},
{
prop: ‘selfNo’,
label: ‘自编号’,
width: ‘120px’,
keynum: 1,
search: ‘’
},
{
prop: ‘projectName’,
label: ‘项目名称’,
keynum: 1,
search: ‘’,
width: ‘120px’
}
]
}
}

**计算属性中对data进行过滤：**



1
2
3
4
5

computed: {
showDetailrowtableDatas() { //重点！！！
const detailSearchParams = this.detailSearchParams
console.log(detailSearchParams)
let arr = JSON.parse(JSON.stringify(this.detailrowtableDatas))
Object.keys(detailSearchParams || {}).forEach(key => {
arr = arr.filter(el => (el[key] + ‘’).includes(detailSearchParams[key]))
})
console.log(arr)
return arr
},
detailSearchParams: {
get() {
return {
orderNumber: this.getSearchSelectValue(‘orderNumber’),
selfNo: this.getSearchSelectValue(‘selfNo’),
projectName: this.getSearchSelectValue(‘projectName’),
productName: this.getSearchSelectValue(‘productName’),
width: this.getSearchSelectValue(‘width’),
height: this.getSearchSelectValue(‘height’),
floorNumber: this.getSearchSelectValue(‘floorNumber’)
}
},
set(newValue) {
this.tabledataslist = this.detailrowtabledataslist.map(el => {
const propsKey = el.prop
return {
…el,
search: newValue[propsKey] || ‘’
}

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader