el-tree 或 el-tree-select 根据条件，控制节点的显示隐藏

情况概述

要求el-tree-select 中的节点 根据节点状态来进行显示隐藏（状态字段为status，显示：‘1’，隐藏：‘0’）

方案：render-content（树节点的内容区的渲染 Function）

使用el-tree控件的 render-content 方法，对每个节点进行判断处理。（el-tree-select同理）

代码如下

<el-tree-select
  v-model="dataForm.orgId"
  :data="props.departmentData"
  :render-content="renderContent"
  filterable
  clearable
  check-strictly
  :props="{ label: 'name', value: 'id'}"
  :render-after-expand="false"
/>

// 根据单位状态status 进行显示隐藏
const renderContent = (h, { node, data }) => {
  if (data.status === '1') {
    return h('span', data.name)
  } else {
    removeNode(node, data)
  }
}
// 移除节点数据
const removeNode = (node, data) => {
  const parent = node.parent
  // 若节点处于children里，则会获取 parent.data.children
  // 若是第一层，parent.data.children 不存在，则会获取parent.data 
  const arr = parent.data.children || parent.data
  // 找到节点对应的 index
  const index = arr.findIndex(item => item.id === data.id)
  // 移除节点数据，达到隐藏的效果
  arr.splice(index, 1)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

如此，我们就能通过判断条件，对节点进行显示隐藏的控制