element Tree 实现单选

element Tree 单选

html

<el-tree 
 :data="treeData" 
 ref="tree" 
 @check-change="orgCheckChange" 
 show-checkbox 
 :check-strictly="true" 
 node-key="id">
</el-tree>

数据

treeData: [
        {
          id: 1,
          label: '品牌一',
          children: [
            {
              id: 4,
              label: '华东区域',
              children: [
                {
                  id: 9,
                  label: '上海'
                },
                {
                  id: 10,
                  label: '昆山'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '品牌二',
          children: [
            {
              id: 5,
              label: '华东区域'
            },
            {
              id: 6,
              label: '华南区域'
            }
          ]
        },
        {
          id: 3,
          label: '品牌三',
          children: [
            {
              id: 7,
              label: '华北区域'
            },
            {
              id: 8,
              label: '华南区域'
            }
          ]
        }
      ],
      defaultProps: null,
      selectOrg: {
        orgsid: []
      }

js

  orgCheckChange(data, checked) {
   
        const indexs = this.selectOrg.orgsid.indexOf(data.id);
        if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
          this.$refs.tree.setCheckedNodes([data]);
          this.selectOrg.orgsid = [];
          this.selectOrg.orgsid.push(data.id);
        } else if (this.selectOrg.orgsid.length === 0 && checked) {
          this.selectOrg.orgsid = [];
          this.selectOrg.orgsid.push(data.id);
        } else if (
          indexs >= 0 &&
          this.selectOrg.orgsid.length === 1 &&
          !checked
        ) {
          this.selectOrg.orgsid = [];
        }
      
    }