Element-實現樹形控件單選

由於在有些業務場景需要用到樹形控件的單選功能，Element UI默認是多選的，但可以通過Element提供的事件和方法來實現樹形控件的單選功能，其代碼如下：

<!--
    @author: itmacy
    @desc: 樹節點單選
-->
<template>
  <div class="about">
      <el-tree :data="data"
               ref="tree"
               :props="defaultProps"
               node-key="id"
               show-checkbox
               check-strictly
               @check-change="handleNodeClick"/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [{
        id: 1,
        label: '一級 1',
        children: [{
          id: 11,
          label: '二級 1-1',
          children: [{
            id: 111,
            label: '三級 1-1-1'
          }]
        }]
      }, {
        id: 2,
        label: '一級 2',
        children: [{
          id: 21,
          label: '二級 2-1',
          children: [{
            id: 222,
            label: '三級 2-1-1'
          }]
        }, {
          id: 22,
          label: '二級 2-2',
          children: [{
            id: 221,
            label: '三級 2-2-1'
          }]
        }]
      }, {
        id: 3,
        label: '一級 3',
        children: [{
          id: 31,
          label: '二級 3-1',
          children: [{
            id: 311,
            label: '三級 3-1-1'
          }]
        }, {
          id: 32,
          label: '二級 3-2',
          children: [{
            id: 321,
            label: '三級 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      selectNode: {} // 選中的節點
    }
  },
  methods: {
    handleNodeClick (data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([data])
        this.selectNode = data
      }
    }
  }
}
</script>

效果如下：

小結：

1. 在標籤中需要設置： show-checkbox（支持選框）、 check-strictly（勾選時子父節點不關聯）
2. 在使用事件@check-change，通過第二個參數checked來判斷是否勾選，當checked爲true時，通過方法setCheckedNodes([])來設置勾選的節點