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

最新推荐文章于 2024-07-23 18:12:36 发布

清欢灬

最新推荐文章于 2024-07-23 18:12:36 发布

阅读量926

点赞数

文章标签：小程序 javascript vue.js vue

本文链接：https://blog.csdn.net/a754334599/article/details/123211029

版权

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