element树形控件单选

需求功能:
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={}
      }

}
相关推荐
蜚鸣2 天前
Vue的快速入门
vue
吃饭最爱4 天前
⽹络请求Axios的概念和作用
vue
魂尾ac4 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐4 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞4 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52145 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦6 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君6 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手6 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO6 天前
分类别柱状图(Vue3)
typescript·vue·echarts