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

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

  • 7
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值