一、选取ElementUI树形控件
ElementUI的树形控件是一种用于显示层级结构数据的控件，用户可以方便的通过控制该控件的展开/折叠状态来进行数据的查看和操作。该控件可以大大简化开发中的树形结构页面的实现，减少开发时间和工作量。
代码：
<template>
<el-tree :data="data" :props="defaultProps"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}]
};
},
defaultProps: {
children: 'children',
label: 'label'
}
};
</script>
二、使用ElementUI树形控件展开/折叠子节点
当ElementUI树形控件用于显示层级结构数据时，需要考虑如何方便用户进行展开/折叠操作。ElementUI提供了默认的展开/折叠操作，用户点击树节点前面的图标即可实现展开/折叠操作。
代码：
<template>
<el-tree :data="data" :props="defaultProps"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}]
};
},
defaultProps: {
children: 'children',
label: 'label'
}
};
</script>
三、自定义ElementUI树形控件展开/折叠子节点
有时候默认的展开/折叠操作无法满足实际需求，此时可以通过自定义操作来实现更加灵活的展开/折叠操作。ElementUI的树形控件提供了通过slot来自定义操作的功能。
代码：
<template>
<el-tree :data="data" :props="defaultProps">
<span slot-scope="{ node, data }">
<i v-if="node.children.length" class="el-icon-caret-right" :class="{\'is-opened\': node.expanded}" @click.stop="handleExpandClick(node, data)"></i>
</span>
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}]
};
},
defaultProps: {
children: 'children',
label: 'label'
},
methods: {
handleExpandClick(node, data) {
node.expanded = !node.expanded;
}
}
};
</script>
四、ElementUI树形控件展开/折叠子节点的事件
在ElementUI的树形控件中，展开/折叠子节点的操作可以触发相应的事件，从而方便用户进一步的操作和处理。当一个节点被展开/折叠时，会触发节点的expand-change事件。
代码：
<template>
<el-tree :data="data" :props="defaultProps" @expand-change="handleExpandChange"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}]
};
},
defaultProps: {
children: 'children',
label: 'label'
},
methods: {
handleExpandChange(node, data) {
console.log(node, data);
}
}
};
</script>
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/192782.html
微信扫一扫 
支付宝扫一扫 