vue + element tree 设置展开,折叠图标,设置节点前图标
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
效果图:
1. 设置展开,折叠图标
<style lang="scss">
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
content: "\e723";
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
content: "\e722";
}
</style>
设置不同图标的效果,可以在element-ui icon模块查看对应的content值
2. 设置节点前的图标
<el-tree
:data="data"
show-checkbox
node-key="id"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<!--可以根据情况,以数据类型来显示不同的图标或图片-->
<i v-if="data.type == 'catalog'" class="el-icon-folder" />
<i v-if="data.type == 'menu'" class="el-icon-tickets" />
<span>{{ node.label }}</span>
</span>
</el-tree>
下面是完整代码:
<template>
<div>
<el-tree
:data="data"
show-checkbox
node-key="id"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<i v-if="data.type == 'catalog'" class="el-icon-folder" />
<i v-if="data.type == 'menu'" class="el-icon-tickets" />
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: '目录1',
type: 'catalog',
children: [{
id: 2,
type: 'menu',
label: '菜单1'
}, {
id: 3,
type: 'menu',
label: '菜单2'
}]
}, {
id: 4,
type: 'catalog',
label: '目录2',
children: [{
type: 'menu',
id: 5,
label: '菜单1'
}, {
id: 6,
type: 'menu',
label: '菜单2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
}
</script>
<style lang="scss">
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
content: "\e723";
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
content: "\e722";
}
</style>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)