Element-ui tree组件自定义节点使用方法

Posted 2021-01-06 zningning

工作上使用到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>