给表单快速添加条件搜索事件:
用到核心代码:
computed: { personTableCompute() { if (this.searchTableInpValue) { this.persionTable.filter((data) => { console.log("tabel===", Object.keys(data)); return ["accountid", "phone", "deptId", "realName", "account"].some( (key) => { return ( String(data[key]) .toLowerCase() .indexOf(this.searchTableInpValue) > -1 ); } ); }); } return this.persionTable; }, },
["accountid", "phone", "deptId", "realName", "account"] 是对象的键,可以添加的搜索选择
table:
<el-table :data="personTableCompute" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" >
核心事件methods:
// 本地搜索过滤 searchTable() { if (this.searchTableInpValue) { this.persionTable = this.persionTable.filter((data) => { console.log("tabel===", Object.keys(data)); return ["accountid", "phone", "deptId", "realName", "account"].some( (key) => { return ( String(data[key]) .toLowerCase() .indexOf(this.searchTableInpValue) > -1 ); } ); }); } else { } }, // 重置 searchTableCancel() { this.searchTableInpValue = ""; if (!this.partentIdvalue) return; this.$axios .post(this.$apis.ccweb.newDataSL.selectUserByDeptId, { deptId: this.partentIdvalue, }) .then((response) => { if (response && response.code === 200) { this.persionTable = response.data; this.form.rectDeptId = this.partentIdvalue; } else { this.persionTable = []; } }); },