Element-ui tree组件自定义节点使用方法
程序员文章站
2022-05-27 14:16:42
工作上使用到element-ui tree 组件，主要功能是要实现节点拖拽和置顶，通过自定义内容方法（render-content）渲染树代码如下~ 1 2
3
工作上使用到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>
推荐阅读
-
Element-ui tree组件自定义节点使用方法
-
在element-ui的el-tree组件中用render函数生成el-button
-
element-ui中Tree树形自定义节点内容render
-
在element-ui的el-tree组件中用render函数生成el-button的实例代码
-
element-ui组件table实现自定义筛选功能的示例代码
-
Element-ui之ElScrollBar组件滚动条的使用方法
-
与 ant-design-vue tree 组件自定义图标的相爱相杀
-
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
-
基于element-ui封装可搜索的懒加载tree组件的实现
-
Element-ui tree组件自定义节点使用方法代码详解