elemen-ui tree树形选择器隐藏外层选择框

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
​
<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label',
          // 设置外层节点不可选
          disabled: function (data) {
              if (data.children) {
                  return true
              } else {
                  return false
              }
          }
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>
<style scoped>
    /* 隐藏不选节点 */
    .el-tree >>> .el-tree-node .el-checkbox .is-disabled{
        display:nonel;
    }
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UI 提供了一个树形选择器组件,可以用于选择树形结构的数据。在使用树形选择器之前,需要先引入 Element-UI 库并注册树形选择器组件。 下面是一个简单的示例代码: ```html <template> <div> <el-tree :data="data" show-checkbox node-key="id" ref="tree" :props="defaultProps"></el-tree> <el-button type="primary" @click="getCheckedNodes">获取选中节点</el-button> </div> </template> <script> export default { data() { return { data: [ { id: 1, label: '一级 1', children: [ { id: 4, label: '二级 1-1', children: [ { id: 9, label: '三级 1-1-1' }, { id: 10, label: '三级 1-1-2' } ] } ] }, { id: 2, label: '一级 2', children: [ { id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' } ] }, { id: 3, label: '一级 3', children: [ { id: 7, label: '二级 3-1' }, { id: 8, label: '二级 3-2' } ] } ], defaultProps: { children: 'children', label: 'label' } }; }, methods: { getCheckedNodes() { const checkedNodes = this.$refs.tree.getCheckedNodes(); console.log(checkedNodes); } } }; </script> ``` 在上述示例中,我们使用了 `el-tree` 组件来展示树形结构数据,并设置了 `show-checkbox` 属性以显示复选。我们还设置了 `node-key` 属性来指定节点的唯一标识符,以便在获取选中节点时使用。 在 `el-tree` 组件中,我们还设置了 `props` 属性来指定节点的属性名称。在上述示例中,我们指定了 `children` 属性为子节点数组,`label` 属性为节点文本。 最后,我们在页面中添加了一个按钮,当按钮被点击时会调用 `getCheckedNodes` 方法来获取选中的节点,并将结果输出到控制台中。 以上就是使用 Element-UI 树形选择器的示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值