查询条件
<el-form :model="search" size="small" label-width="80px">
<el-row>
<el-col :span="8">
<el-form-item label="名称">
<el-input v-model="search.mc" clearable placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="描述">
<el-input v-model="search.ms" clearable placeholder="请输入描述" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="text-align:left">
<el-button size="small" type="primary" @click="filterTreeData">查询</el-button>
<el-button size="small" @click="resetmh">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
树形表格数据
<el-table
border
:data="treeTableData"
row-key="id"
:expand-row-keys="expandRowKeys"
:tree-props="{ children: 'children', hasChildren: 'haschildren' }"
>
<el-table-column type="selection" width="55" :selectable="selected"></el-table-column>
<el-table-column prop="mc" label="名称" width="300" :show-overflow-tooltip="true" />
<el-table-column prop="ms" label="描述" :show-overflow-tooltip="true" />
<el-table-column prop="sstdmc" label="所属团队" width="200" :show-overflow-tooltip="true" />
</el-table>
data数据
return{
// 表格树数据
tableData: [],
expandRowKeys:[],
// 用于展现的表格树数据
treeTableData: [],
search: {
mc: '',
ms: '',
},
}
js数据
//重置
resetmh(){
this.search.mc = "";
this.search.ms = "";
this.filterTreeData()
},
// 过滤数据
filterTreeData() {
var searchValue = this.search
if (searchValue.mc != '' || searchValue.ms != '') {
let treeData = this.tableData
let handleTreeData = this.handleTreeData(treeData, searchValue)
this.setExpandRow(handleTreeData)
this.treeTableData = handleTreeData
} else {
this.treeTableData = this.tableData
}
},
// 树形表格过滤
handleTreeData(treeData, searchValue) {
if (!treeData || treeData.length === 0) {
return []
}
const array = []
for (let i = 0; i < treeData.length; i += 1) {
// 根据需求修改过滤逻辑
let match = false
let flag = false
let f1 = true
if (this.search.mc !== '') {
flag = treeData[i]['mc'].includes(searchValue.mc)
f1 = flag
}
if (this.search.ms !== '') {
flag = treeData[i]['ms'].includes(searchValue.ms)
if(flag === true && f1 === false){
flag = false
}
}
match |= flag
// for (let key in treeData[i]) {
// 下面这段逻辑
// 判断对象{key:value}的value是否为String类型，如果是，那就判断value是否存在要过滤的值，只要有一个为true，那就跳出循环
// if (typeof treeData[i][key] == 'string') {
// // x |= y // x = x | y，|：位运算符，只要二进制数字存在1便为1
// // 大概为： false:0 true:1 0|0为0 0|1或1|0或1|1都为1
// match |= treeData[i][key].includes(searchValue)
// if (match) {
// break
// }
// }
if (this.handleTreeData(treeData[i].children, searchValue).length > 0 || match) {
// ... 表示 js的展开能读取的元素
array.push({
// 展开treeData[i]里所有能读取的元素并赋予对象
...treeData[i],
children: this.handleTreeData(treeData[i].children, searchValue)
})
}
}
return array
},
后台接口数据
//查询知识库列表
async getData() {
const { data: res } = await this.$postRequest('zskflgl/getZskflTreeData', {
mc: this.search.mc,
ms: this.search.ms,
sstd: this.search.sstd,
sstdmc: this.search.sstdmc
})
if (res.flag === 'Y') {
this.tableData = res.data
this.filterTreeData()
} else {
this.$message.error(res.message)
}
},
|
