el-tree的label格式化
时间: 2023-10-10 22:09:44 浏览: 97
el-select-tree:ElementUI的el-select与el-tree结合
5星 · 资源好评率100%
el-tree的label格式化可以通过以下方式实现:
1. 使用el-tree的label属性,直接在label中添加HTML代码进行格式化,例如:
```
<template>
<el-tree :data="data" :props="defaultProps">
<template v-slot:label="{ node, data }">
<span v-if="node.level === 0">{{ data.label }}</span>
<span v-else-if="node.level === 1">
<i class="el-icon-folder"></i>
{{ data.label }}
</span>
<span v-else>
<i class="el-icon-document"></i>
{{ data.label }}
</span>
</template>
</el-tree>
</template>
```
2. 使用slot-scope自定义label的格式化方式,例如:
```
<template>
<el-tree :data="data" :props="defaultProps">
<template v-slot:label="{ node, data }">
<my-label :data="data" :level="node.level"></my-label>
</template>
</el-tree>
</template>
<template id="my-label">
<span v-if="level === 0">{{ data.label }}</span>
<span v-else-if="level === 1">
<i class="el-icon-folder"></i>
{{ data.label }}
</span>
<span v-else>
<i class="el-icon-document"></i>
{{ data.label }}
</span>
</template>
<script>
Vue.component('my-label', {
props: ['data', 'level'],
template: '#my-label'
})
</script>
```
以上代码中,使用了slot-scope和组件的方式来自定义label的格式化方式,可以根据自己的需求进行修改和扩展。
阅读全文