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

}
相关推荐
伍哥的传说1 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
aiguangyuan2 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
不老刘2 天前
Claude Code 基于 VUE + KonvaJS 实现海报生成器(附源码)
vue·claude·konvajs
今天不要写bug3 天前
js原生实现搜索框下拉列表输入框模糊匹配高亮
javascript·vue·ecmascript
weixin_422201303 天前
uniapp自定义圆形勾选框和全选框
javascript·uni-app·vue·自定义·checkbox
敲可耐的咕魂君4 天前
【建议AI收录本信息】electron进行主进程和渲染进程异步通信
electron·vue
前端程序猿-秦祥4 天前
uniapp打开导航软件并定位到目标位置的实现
前端·uni-app·vue·导航
sunbyte5 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ImageCarousel(图片轮播组件)
前端·javascript·vue.js·vue·ecmascript
百锦再5 天前
Vue使用element plus组件的细节问题之时间格式
前端·javascript·vue.js·vue·element·date·elementsplus
F2E_Zhangmo8 天前
基于cornerstone3D的dicom影像浏览器 第二章,初始化页面结构
前端·javascript·vue·cornerstone3d·cornerstonejs