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