vue + element 中的tree树，自定义增加单选按钮r

网上有很多重置el-tree勾选以达到单选的目的，
主要思路是在点击多选框或者是点击树节点时候setCheckedNodes 设置当前勾选节点
但是亲身实验效果并不理想，多层级或快速点击时都会选择多个或者页面视图是勾选一个，但是获取勾选元素时还是多个节点被勾选
于是，展示自定义节点内容，并加入radio单选按钮真正的实现单选；

首先通过slot-scope="{ node, data }" 自定义节点内容

<el-tree ref="tree" :indent="7" v-loading="loadingTree" 
    :expand-on-click-node="false"  empty-text="正在加载中" element-loading-text="正在加载中"     
    :data="treeData" :default-expanded-keys="keyIdArray" :props="defaultProps" node-key="id">
       <span slot-scope="{ node, data }">
             <el-radio v-model="radio" 
                            :label="data.id" 
                            @change="change(data)">
                    {{ node.label }}
              </el-radio>
        </span>
</el-tree>

data中设置并绑定单选框的值

data() {
    return {
      defaultProps: {
        children: "childList",
        label: "name"
      },
      radio: "",    //  这一行
      keyIdArray: ["1"],
      treeData: [],
      loadingTree: false,
      checkedList: []   //选中节点的数据
    };
  },

通过点击时单选框change事件赋值给checkedList

change(data) {
      this.checkedList = [];
      this.checkedList[0] = data;
    },