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