站长资源网络编程
Element-ui tree组件自定义节点使用方法代码详解
简介工作上使用到element-ui tree 组件，主要功能是要实现节点拖拽和置顶，通过自定义内容方法（render-content）渲染树代码如下~
工作上使用到element-ui tree 组件，主要功能是要实现节点拖拽和置顶，通过自定义内容方法（render-content）渲染树代码如下~
<template>
<div class="sortDiv">
<el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-on-click-node="false" :render-content="renderContent" :allow-drop="allowDrop">
</el-tree>
<el-button @click="getData">获取数据</el-button>
</div>
</template>
<script>
export default {
name: 'Sort',
data() {
return {
sortData: [
{
id: 1,
label: '一级 1',
checkItem: true,
children: [
{
id: 4,
label: '二级 1-1',
checkItem: false
},
{
id: 9,
label: '二级 1-2',
checkItem: false
},
{
id: 10,
label: '二级 1-3',
checkItem: false
}
]
},
{
id: 2,
label: '一级 2',
checkItem: true,
children: [
{
id: 5,
label: '二级 2-1',
checkItem: true
},
{
id: 6,
label: '二级 2-2',
checkItem: true
}
]
},
{
id: 3,
label: '一级 3',
checkItem: true,
children: [
{
id: 7,
label: '二级 3-1',
checkItem: true
},
{
id: 8,
label: '二级 3-2',
checkItem: false
}
]
}
]
};
},
methods: {
// 是否允许拖拽
allowDrop (draggingNode, dropNode, type) {
if (draggingNode.parent === dropNode.parent) {
return type !== 'inner'
}
else return false
},
//获取数据
getData () {
let result = this.$refs['sortTree'].data;
let sortRulesMaps = [];
result.forEach((element, index) => {
let item = null;
if (element.checkItem) {
if (element.children && element.children.length > 0) {
item = {
orderIndex: index,
sortField: element.label,
rule: ['OTHERS']
};
element.children.forEach(i => {
if (i.checkItem) {
item.rule.push(i.label);
}
});
item.rule = item.rule.join('_');
}
}
item && sortRulesMaps.push(item);
});
},
//同级置顶功能
toTop(node, data) {
let c = Object.assign({}, data);
if (node.parent.level === 0) {
this.sortData.unshift(c)
} else {
node.parent.data.children.unshift(c);
}
this.$refs['sortTree'].remove(data.id);
},
changeNode(r, node, data) {
data.checkItem = r;
},
//自定义内容
renderContent(h, { node, data }) {
return (
<span class="custom-tree-node">
<span>{data.label}</span>
<span>
<el-checkbox
v-model={data.checkItem}
checked={data.checkItem}
on-change={r => this.changeNode(r, node, data)}
/>
<el-button
size="mini"
type="text"
on-click={() => this.toTop(node, data)}
style="color:#707375;margin-left:10px"
>
<i class="fa fa-arrow-up">置顶</i>
</el-button>
</span>
</span>
);
}
}
};
</script>
<style lang="scss">
.sortDiv {
.el-icon-caret-right:before {
content: '\E604';
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
补充：下面看下使用element的自定义tree组件的实例代码
在使用elemnet-ui时，需要自定义tree的一些元素，采用 :render-content属性来进行渲染这些元素，但是官网给的例子有一点小坑，
renderContent:function(createElement, { node, data, store }) {
var self = this;
return createElement('span', [
createElement('span', node.label),
createElement('span', {attrs:{
style:"float: right; margin-right: 200px"
}},[
createElement('el-button',{attrs:{
size:"mini"
},on:{
click:function() {
console.info("点击了节点" + data.id + "的添加按钮");
store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);
}
}},"添加"),
createElement('el-button',{attrs:{
size:"mini"
},on:{
click:function() {
console.info("点击了节点" + data.id + "的删除按钮");
store.remove(data);
}
}},"删除"),
]),
]);
}
总结
以上所述是小编给大家介绍的Element-ui tree组件自定义节点使用方法代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！