Skip to content

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)
})

Released under the MIT License.