el-table树结构的搜索---递归遍历
表格树结构搜索
- 效果图
- 标题
点击可查看 ➡ element ui 树形表格过滤查询数据解决( 可直接套用 )
效果图
标题
<el-table ref="tableData" :data="tableData" :height="tableheight" default-expand-all row-key="sysResourcesId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width:100%;margin:0 auto 5px;font-size:0.8rem" v-loading="loading" highlight-current-row>
<el-table-column show-overflow-tooltip min-width="100" prop="sortNum" label="排序号" align="left"></el-table-column>
<el-table-column show-overflow-tooltip prop="resourcesCode" label="编码" align="left" min-width="100">
<!-- -->
<template #header v-if="headerItem.seach">
<el-popover v-if="headerItem.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem.visible">
<el-input autofocus clearable @clear="clearSearch(headerItem)" style="width: 200px" size="small" v-model="headerItem.seachSetting.value" :placeholder="'请输入'+headerItem.label" @keyup.enter.native="todoSearchItself(headerItem)" />
<el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearchItself(headerItem)">重 置</el-button>
<el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearchItself(headerItem)">搜 索</el-button>
<div style="display: flex;align-items: center" slot="reference">
<span class="search-title">{{ headerItem.label }}</span>
<img style="width: 13px;margin-left: 10px;cursor: pointer" :src="headerItem.seachSetting.value&&headerItem.seachSetting.value!==''?img2:img1" />
</div>
</el-popover>
</template>
<!-- -->
<template slot-scope="scope">
<span>{{scope.row.resourcesCode}}</span>
</template>
</el-table-column>
<!-- <el-table-column show-overflow-tooltip prop="resourcesCode" label="编码" align="left" min-width="100">
<template slot-scope="scope">
<span>{{scope.row.resourcesCode}}</span>
</template>
</el-table-column> -->
.......
methods:{
// 自身的按钮搜索点击、重置清除操作
todoSearchItself (headerItem) {
headerItem.visible = false
if (headerItem.seachSetting.type === 'Input') {
this.seachFormItself[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = headerItem.seachSetting.value
}
this.todoSearch(this.seachFormItself)
},
clearSearchItself (headerItem) {
if (headerItem.seachSetting && headerItem.seachSetting.type) {
headerItem.visible = false
if (headerItem.seachSetting.type === 'Input') {
headerItem.seachSetting.value = ''
this.seachFormItself[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
}
this.clearSearch(this.seachFormItself)
}
},
// 触发的方法-操作
clearSearch (val) {
console.log('清空--clearSearch', val)
this.pageNum = 1
this.pageSize = 10
this.seachForm = val
this.computedTableData()
},
todoSearch (val) {
console.log('val---todoSearch', val)
this.pageNum = 1
this.pageSize = 10
this.seachForm = val
this.computedTableData()
},
// 根据搜索条件模糊查询-计算tableData
computedTableData () {
console.log('查询', this.seachForm)
/* resourcesCode resourcesName */
console.log('表格', this.tableData)
const tableCopyData = JSON.parse(JSON.stringify(this.copyTableData))
if (this.seachForm.resourcesCode && this.seachForm.resourcesName) {
const array = this.handleTreeData(tableCopyData, this.seachForm.resourcesCode, 'resourcesCode')
const arrayFinally = this.handleTreeData(array, this.seachForm.resourcesName, 'resourcesName')
this.tableData = arrayFinally
} else if (this.seachForm.resourcesCode && !this.seachForm.resourcesName) {
const array = this.handleTreeData(tableCopyData, this.seachForm.resourcesCode, 'resourcesCode')
this.tableData = array
} else if (!this.seachForm.resourcesCode && this.seachForm.resourcesName) {
const arrayFinally = this.handleTreeData(tableCopyData, this.seachForm.resourcesName, 'resourcesName')
this.tableData = arrayFinally
} else {
this.tableData = tableCopyData
}
/* if (this.seachForm.resourcesCode && this.seachForm.resourcesName) {
const array = this.recursiveFilter(tableCopyData, this.seachForm.resourcesCode, 'resourcesCode')
const arrayFinally = this.recursiveFilter(array, this.seachForm.resourcesName, 'resourcesName')
this.tableData = arrayFinally
} else if (this.seachForm.resourcesCode && !this.seachForm.resourcesName) {
const array = this.recursiveFilter(tableCopyData, this.seachForm.resourcesCode, 'resourcesCode')
this.tableData = array
} else if (!this.seachForm.resourcesCode && this.seachForm.resourcesName) {
const arrayFinally = this.recursiveFilter(tableCopyData, this.seachForm.resourcesName, 'resourcesName')
this.tableData = arrayFinally
} else {
this.tableData = tableCopyData
} */
// console.log('array', array)
},
// 树形表格过滤
handleTreeData (treeData, searchValue, keyName) {
if (!treeData || treeData.length === 0) {
return []
}
const array = []
for (let i = 0; i < treeData.length; i += 1) {
let match = false
for (const pro in treeData[i]) {
if (pro === keyName) {
match |= treeData[i][pro].includes(searchValue)
if (match) break
}
/* if (typeof (treeData[i][pro]) === 'string') {
match |= treeData[i][pro].includes(searchValue)
if (match) break
} */
}
if (this.handleTreeData(treeData[i].children, searchValue, keyName).length > 0 || match) {
array.push({
...treeData[i],
children: this.handleTreeData(treeData[i].children, searchValue, keyName)
})
}
}
return array
},
/* recursiveFilter (arr, type, keyName) {
console.log('arr-type', arr, type)
const that = this
const data = arr.filter(item => {
return item[keyName].indexOf(type) !== -1
}).map((item) => {
item = Object.assign({}, item)
if (item.children) {
// 递归循环
item.children = that.recursiveFilter(item.children, type, keyName)
}
return item
})
return data
}, */
}
王志晗: 用这个就可以 ::v-deep .el-upload-list__item .el-icon--close-tip { display: none !important; }
m0_64642431: 坚持 到感动自己
jiubani: 拼搏 到无能为力
咩有猫腻.: 哇 谢谢
来自上海的这位朋友: 自动获取焦点还可以这样的 [code=html] <el-input :id="'editInput'+scope.row.index"</el-input> cellClick(row, column, cell, event) { console.log('cellClick',row, column, cell, event) if (row.column.label === '还款金额') { this.tabClickIndex = row.index this.isInputBlur = true this.$nextTick(() => { let editInput = document.getElementById('editInput'+row.index); editInput.focus(); }) } else { this.tabClickIndex = null this.isInputBlur = false } }, [/code]