<el-tree
                :data="data2"
                show-checkbox
                node-key="id"
                ref="DeviceGroupTree"
                @check-change="handleChangeClick"
                :props="defaultProps">
             </el-tree>
   data() {
      return {
        data2: [{
          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'
        }
      };

特别说明一下:
获取选择的节点:

this.$refs.DeviceGroupTree.getCheckedKeys()

上边的方法当获取单独的子节点时,不包括父节点

获取子节点和父节点

         this.$refs.DeviceGroupTree.getCheckedKeys().concat(this.$refs.DeviceGroupTree.getHalfCheckedKeys())

返回一个数组里边包含着子节点和父节点,但我感觉这样不太好,应该单独分开,子节点和所属的父节点在一起,就看应用场景是啥啦

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐