ElementUI 使用记录

节点标识和数据字段别名配置

开发树型结构相关需求时, 后台返回的数据和 elementUI 为我们提供的示例中的数据的数据结构可能会有出入, 这时候需要通过树型控件的 node-key 属性和 props 属性来分别指定树型节点的唯一表示和数据的其他配置选项

获取选中数据的值━━不包含半选中状态的节点

this.$refs.tree.getCheckedNodes()

获取选中数据的值━━包含半选中状态的节点

this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())

获取选中数据的唯一标识 node-key 组成的数组━━不包含半选中状态的节点

this.$refs.tree.getCheckedKeys()

获取选中数据的唯一标识 node-key 组成的数组━━包含半选中状态的节点

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

设置选择父节点半选中状态

现有 treeData 数据如下:

treeData: [
        {
          treeId: 100,
          name: '一级 1',
          list: [
            {
              treeId: 101,
              name: '一级 1-1'
            }, {
              treeId: 102,
              name: '一级 1-2'
            }, {
              treeId: 103,
              name: '一级 1-3'
            }
          ]
        }, {
          treeId: 200,
          name: '二级 2',
          list: [
            {
              treeId: 201,
              name: '二级 2-1'
            }, {
              treeId: 202,
              name: '二级 2-2'
            }
          ]
        }, {
          treeId: 300,
          name: '三级 3',
          list: [
            {
              treeId: 301,
              name: '三级 3-1'
            }, {
              treeId: 302,
              name: '三级 3-2'
            }
          ]
        }
    ]

当 el-tree 不能 check-strictly 属性时(需要选中一个子节点父节点默认选中), 使用 setCheckedKeys([100, 101]) 想要将 一级 1 和 一级 1-1 选中时, 会发现一级的所有节点都会被选中, el-tree 中也暂时未提供相关可以直接设置类似节点选中的功能, 可以用如下方式解决:

<template>
  <div>
    <el-tree
      :data="treeData"
      :props="treeProps"
      show-checkbox
      default-expand-all
      node-key="treeId"
      ref="tree"
      highlight-current
      check-strictly
    >
    </el-tree>
    <el-button @click="getCheckedValue" type="primary">获取选中值</el-button>
    <el-button @click="setCheckedKeys" type="primary"
      >通过 node-key 设置</el-button
    >
    <el-button @click="resetChecked" type="primary">清空</el-button>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      treeProps: {
        children: 'list',
        label: 'name'
      },
      treeData: [
        {
          treeId: 100,
          name: '一级 1',
          list: [
            {
              treeId: 101,
              name: '一级 1-1'
            }, {
              treeId: 102,
              name: '一级 1-2'
            }, {
              treeId: 103,
              name: '一级 1-3'
            }
          ]
        }, {
          treeId: 200,
          name: '二级 2',
          list: [
            {
              treeId: 201,
              name: '二级 2-1'
            }, {
              treeId: 202,
              name: '二级 2-2'
            }
          ]
        }, {
          treeId: 300,
          name: '三级 3',
          list: [
            {
              treeId: 301,
              name: '三级 3-1'
            }, {
              treeId: 302,
              name: '三级 3-2'
            }
          ]
        }
      ]
    }
  },
  created () { },
  methods: {
    getCheckedValue () {
      console.log(this.$refs['tree'].getCheckedNodes())
      console.log(this.$refs['tree'].getCheckedNodes().concat(this.$refs['tree'].getHalfCheckedNodes()))
      console.log(this.$refs['tree'].getCheckedKeys())
      console.log(this.$refs['tree'].getCheckedKeys().concat(this.$refs['tree'].getHalfCheckedKeys()))
    },
    setCheckedKeys () {
      const _this = this
      let checkedKeys = [100, 101, 200, 201]
      checkedKeys.forEach((i, n) => {
        let node = _this.$refs.tree.getNode(i)
        if (node.isLeaf) {
          _this.$refs.tree.setChecked(node, true)
        }
      })
    },
    resetChecked () {
      this.$refs.tree.setCheckedKeys([])
    }
  }
}
</script>