element树形控件单选

需求功能：

1，element树形控件单选

2，双击节点编辑

  
    
      
    
  

data() {
    return {
    	defaultProps: {
          children: 'subNodeList',
          label: 'subCodeDesc'
        },
        cateNameInput: '',//编辑节点值
        selectTreeNode:{],//选中节点
        treesObj:[{
		"highlight": null,
		"subCode": "1",
		"parentCode": null,
		"subNodeList": [{
			"highlight": null,
			"subCode": "11",
			"parentCode": "1",
			"subNodeList": [],
			"subCodeDesc": "子节点11"
		}],
		"subCodeDesc": "父节点1"
	},
	{
		"highlight": null,
		"subCode": "2",
		"parentCode": null,
		"subNodeList": [],
		"subCodeDesc": "父节点2"
	},
	{
		"highlight": null,
		"subCode": "3",
		"parentCode": null,
		"subNodeList": [],
		"subCodeDesc": "父节点3"
	}
],
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

获取当前选中节点，清空其他节点，再设置当前节点为选中状态

editCateName(data) {
    //双击节点的名称修改名称
      this.cateNameInput = data.subCodeDesc;
      this.treeIsEdit = data.subCode;
      this.$set(data, "inputStatus", true);
      this.$nextTick(() => {
        this.$refs[data.subCode] && this.$refs[data.subCode].focus(); // 获取输入框，自动获取焦点
      });
    };
async editSave(val, data) {
    //失去焦点之后执行的方法
      const inputName = val.target.value.trim();
      if (inputName == '') {
        this.$message({
          type: 'warning',
          message: '名称不能为空,请重新输入'
        });
        this.$set(data, "inputStatus", false); // 让文本span标签显示，输入框隐藏
        return;
      }
      if (inputName == data.subCodeDesc) {
        this.$set(data, "inputStatus", false);
        return;
      }
      this.$set(data, "inputStatus", false);
      let param = {
        groupType:"0103",//订单组
        costControlScope:this.costControlScope,
        code:data.subCode,
        codeDesc: inputName,
      };

      await this.$axios.post('/api/', param).then(res => {
        if (res.code === 200) {
          this.treedata.subCodeDesc = inputName;
          data.subCodeDesc = inputName;
          this.$message({
            type: 'success',
            message: '修改名称成功'
          });
        }
        // else {
        //   this.$message({
        //     type: 'warning',
        //     message: res.msg
        //   });
        // }
        this.getTrees();
      });
    };
getCheckedNodes(nodeData,nodeSelected){
	if (nodeSelected) {
        this.selectTreeNode = nodeData;
        this.$refs.tree.setCheckedKeys([]);//清空
        this.$refs.tree.setCheckedNodes([this.selectTreeNode])//设置
      }
      else{
        this.selectTreeNode={}
      }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61