element树形控件单选

最新推荐文章于 2024-06-18 10:14:03 发布

原创最新推荐文章于 2024-06-18 10:14:03 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue应用中使用ElementUI的el-tree组件，实现在树形结构中进行单选和双击节点编辑功能，包括获取选中节点、清空状态和修改节点名称的处理逻辑。

需求功能：

1，element树形控件单选

2，双击节点编辑

在这里插入图片描述

<div style="height: calc(100% - 48px)">
  <el-scrollbar class="scrollbar-wrapper">
    <el-tree :data="treesObj" show-checkbox default-expand-all check-strictly check-on-click-node
      node-key="subCode" ref="tree" highlight-current :props="defaultProps"
      @check-change="getCheckedNodes">
      <template slot-scope="{ node, data }" :ref="node.data.subCode">
        <span class="enumText" @dblclick.stop="editCateName(data, node)"
          v-if='!data.inputStatus'>{{ data.subCodeDesc }}</span>
        <el-input class="inputStyle" @blur="$event => editSave($event, data)" size="small" show-word-limit
          v-on:keyup.native.enter="$event.target.blur" placeholder="请输入" v-else="data.inputStatus"
          :ref="data.subCode" v-model.trim="cateNameInput"></el-input>
      </template>
    </el-tree>
  </el-scrollbar>
</div>
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"
	}
],
    }
  },

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

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={}
      }

}