工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~
1 <template> 2 <div class="sortDiv"> 3 <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-on-click-node="false" :render-content="renderContent" :allow-drop="allowDrop"> 4 </el-tree> 5 <el-button @click="getData">获取数据</el-button> 6 </div> 7 </template> 8 <script> 9 export default { 10 name: 'Sort', 11 data() { 12 return { 13 sortData: [ 14 { 15 id: 1, 16 label: '一级 1', 17 checkItem: true, 18 children: [ 19 { 20 id: 4, 21 label: '二级 1-1', 22 checkItem: false 23 }, 24 { 25 id: 9, 26 label: '二级 1-2', 27 checkItem: false 28 }, 29 { 30 id: 10, 31 label: '二级 1-3', 32 checkItem: false 33 } 34 ] 35 }, 36 { 37 id: 2, 38 label: '一级 2', 39 checkItem: true, 40 children: [ 41 { 42 id: 5, 43 label: '二级 2-1', 44 checkItem: true 45 }, 46 { 47 id: 6, 48 label: '二级 2-2', 49 checkItem: true 50 } 51 ] 52 }, 53 { 54 id: 3, 55 label: '一级 3', 56 checkItem: true, 57 children: [ 58 { 59 id: 7, 60 label: '二级 3-1', 61 checkItem: true 62 }, 63 { 64 id: 8, 65 label: '二级 3-2', 66 checkItem: false 67 } 68 ] 69 } 70 ] 71 }; 72 }, 73 methods: { 74 // 是否允许拖拽 75 allowDrop (draggingNode, dropNode, type) { 76 if (draggingNode.parent === dropNode.parent) { 77 return type !== 'inner' 78 } 79 else return false 80 }, 81 //获取数据 82 getData () { 83 let result = this.$refs['sortTree'].data; 84 let sortRulesMaps = []; 85 result.forEach((element, index) => { 86 let item = null; 87 if (element.checkItem) { 88 if (element.children && element.children.length > 0) { 89 item = { 90 orderIndex: index, 91 sortField: element.label, 92 rule: ['OTHERS'] 93 }; 94 element.children.forEach(i => { 95 if (i.checkItem) { 96 item.rule.push(i.label); 97 } 98 }); 99 item.rule = item.rule.join('_'); 100 } 101 } 102 item && sortRulesMaps.push(item); 103 }); 104 }, 105 //同级置顶功能 106 toTop(node, data) { 107 let c = Object.assign({}, data); 108 if (node.parent.level === 0) { 109 this.sortData.unshift(c) 110 } else { 111 node.parent.data.children.unshift(c); 112 } 113 this.$refs['sortTree'].remove(data.id); 114 }, 115 changeNode(r, node, data) { 116 data.checkItem = r; 117 }, 118 //自定义内容 119 renderContent(h, { node, data }) { 120 return ( 121 <span class="custom-tree-node"> 122 <span>{data.label}</span> 123 <span> 124 <el-checkbox 125 v-model={data.checkItem} 126 checked={data.checkItem} 127 on-change={r => this.changeNode(r, node, data)} 128 /> 129 <el-button 130 size="mini" 131 type="text" 132 on-click={() => this.toTop(node, data)} 133 style="color:#707375;margin-left:10px" 134 > 135 <i class="fa fa-arrow-up">置顶</i> 136 </el-button> 137 </span> 138 </span> 139 ); 140 } 141 } 142 }; 143 </script> 144 <style lang="scss"> 145 .sortDiv { 146 .el-icon-caret-right:before { 147 content: '\E604'; 148 } 149 } 150 .custom-tree-node { 151 flex: 1; 152 display: flex; 153 align-items: center; 154 justify-content: space-between; 155 font-size: 14px; 156 padding-right: 8px; 157 } 158 </style>