element tree 优化线条树，添加增删改功能

  1 <template>
  2     <div>
  3         <el-tree :data="list" :props=defaultProps :expand-on-click-node="false" :default-expand-all="true"
  4             ref='treeHight' node-key='id' :show-checkbox=isShowCheck @check="checkNodeData">
  5             <span class="custom-tree-node" slot-scope="{node,data}">
  6                 <span class="el-tree-node__label" @click='handleNodeClick(data)' v-show='!data.isEdit'>
  7                     {{node.label}}
  8                 </span>
  9                 <span v-show='data.isEdit'>
 10                     <el-input v-model='editValue' size='mini' autofocus @blur.stop='nodeBlur(node,data)'
 11                         @keydown.native.enter='nodeBlur(node,data)' :ref="'slotTreeInput'+data.id"></el-input>
 12                 </span>
 13                 <span class="costom-node-tool">
 14                     <span class="el-icon-edit" @click.prevent.stop='editItem(node,data)' title="编辑节点"
 15                         v-show='isShowEdit'></span>
 16                     <span class="el-icon-plus" @click.prevent.stop='addBroItem(node,data)' title="新增同级"
 17                         v-show='isShowEdit'></span>
 18                     <span class="el-icon-circle-plus-outline" @click.prevent.stop='addChildren(node,data)'
 19                         v-show='isShowEdit' title="新增子级"></span>
 20                     <span class="el-icon-delete" @click.prevent.stop='deleteItem(node,data)' title="删除"
 21                         v-show='isShowDel'></span>
 22                 </span>
 23             </span>
 24         </el-tree>
 25     </div>
 26 </template>
 27 <script>
 29     export default {
 30         name: "lineTree",
 31         data() {
 32             return {
 33                 defaultProps: {
 34                     children: 'children',
 35                     label: 'name'
 36                 },
 37                 editValue: '',
 38             };
 39         },
 40         props: {
 41             list: {
 42                 type: Array,
 43                 default: [],
 44             },
 45             isShowEdit: {
 46                 type: Boolean, //是否显示编辑
 47                 default: false
 48             },
 49             isShowDel: {
 50                 type: Boolean, //是否显示删除
 51                 default: false
 52             }, 57             isShowCheck: { //是否显示复选框
 58                 type: Boolean,
 59                 default: false
 60             }
 61         }, 77         methods: {
 78             handleNodeClick(data) {
 79                 this.$emit("treeNodeClick", data)
 80             },
 81             nodeBlur(node, data) {
 82                 if (!data.name) {
 83                     this.$message.warning('名称不可为空');
 84                     return
 85                 } else {
 86                     if (data.isEdit) {
 87                         this.$set(data, 'isEdit', false)
 88                         this.$set(data, 'name', this.editValue)
 89                         var newItem = {
 90                             name: data.name,
 91                             pid: data.pid,
 92                             id: data.id == 'selfId' ? '' : data.id,
 93                         }
 94                         this.$emit('editItem', newItem)
 95                     }
 96                 }
 97             },
 98             // 编辑
 99             editItem(node, item) {
100                 if (!item.isEdit) {
101                     this.$set(item, 'isEdit', true)
102                 }
103                 this.editValue = item.name;
104                 this.$nextTick(() => {
105                     this.$refs['slotTreeInput' + item.id].focus()
106                 })
107             },
108             // 新增同级
109             addBroItem(node, item) {
110                 var newItem = {
111                     id: 'selfId',
112                     pid: item.pid ? item.pid : item.pId,
113                     name: '新增节点',
114                     isEdit: true
115                 }
116                 this.editValue = '新增节点';
117                 this.$refs.treeHight.append(newItem, node.parent)
118                 this.$nextTick(() => {
119                     this.$refs['slotTreeInput' + newItem.id].focus()
120                 })
121             },
122             // 新增子级
123             addChildren(node, item) {
124                 var newItem = {
125                     id: 'selfId',
126                     pid: item.id,
127                     name: '新增节点',
128                     isEdit: true
129                 }
130                 this.editValue = '新增节点';
131                 this.$refs.treeHight.append(newItem, node)
132                 this.$nextTick(() => {
133                     this.$refs['slotTreeInput' + newItem.id].focus()
134                 })
135             },
136             deleteItem(node, item) {
137                 this.$emit('deleteItem', item)
138             },
139             checkNodeData(data, node) {
140                 this.$emit('checkItems', node.checkedKeys)
141             },
142 
143         },
144     };
145 </script>
146 <style scoped>
147

148 </style>