Appearance
el-tree多条件筛选
el-tree
组件上指定筛选方法filterNode
html
<el-tree ref="treeFormRef" :data="treeData" :filter-node-method="filterNode" >
两个筛选条件: 组织selectedDeptValue
和文本filterText
html
<el-tree-select ref="treeSelectRef" v-model="selectedDeptValue" :data="deptTreeList" @change="handleTreeSelect" placeholder="请选择组织"
clearable @clear="clearSelect" />
<el-input v-model="filterText" placeholder="请输入筛选值" clearable />
方法:
js
// 筛选
const selectedDeptValue = ref('') //组织代号可以从树形选择框获取
const filterText = ref('') // 输入框可以得到
const filterNode = (value, data) => {
if (!selectedDeptValue.value && !filterText.value) return true
return (!selectedDeptValue.value || data.fromOrganization === selectedDeptValue.value) && (!filterText || data.tmDescription.toLocaleLowerCase().includes(filterText.value.toLocaleLowerCase()))
}
// 这里分开写watch,也可以合并
watch(filterText, (val) => {
// 处理大小写问题
treeFormRef.value.filter(val.toLocaleLowerCase())
})
watch(selectedDeptValue, (val) => {
treeFormRef.value.filter(val)
})