antd-design-vue tree自定义插槽
网上有很多文章是用slot=“title”插槽渲染,我试了之后一直都渲染不出来。应该是因为后端返的数据格式不是树要的格式,所以我先用replaceFields{children:‘children’, title:‘title’, key:‘key’ }替换了,它的优先级比插槽高,所以title插槽不起作用用自定义插槽后能显示<a-tree:tree-data="treeData"@sele
·
网上有很多文章是用slot=“title”插槽渲染,我试了之后一直都渲染不出来。
应该是因为后端返的数据格式不是树要的格式,所以我先用replaceFields
{children:‘children’, title:‘title’, key:‘key’ }替换了,它的优先级比插槽高,所以title插槽不起作用
用自定义插槽后能显示
<a-tree
:tree-data="treeData"
@select="onSelect"
:replace-fields="replaceFied"
>
<template slot="custom" slot-scope="item">
<span>{{ item.fVcGroupName }}</span>
<!-- 新增同级 -->
<!-- <a-icon v-show="!item.isPeople" type="plus" class="iconplus iconSame" @click="changeTongji" /> -->
<!-- 新增子级 -->
<a-icon v-show="!item.isPeople" type="plus" class="iconplus " @click="changeFulevel(item)" />
<!-- 编辑同级 -->
<a-icon v-show="!item.isPeople" type="edit" class="iconplus" @click="onEdit(item)" />
<!-- 删除同级 -->
<a-icon v-show="!item.children" type="close" class="iconplus iconLast" @click="onRemove(item)" />
</template>
</a-tree>
在调用树数据的接口里,设置custom,并在循环的时候增加scopedSlots字段
// 查询分类列表--树数据
getTreeList() {
Treelist().then(res => {
if (res && res.code == 0) {
const scopedSlots = {
title: 'custom'
res.forEach(item => {
item.scopedSlots = scopedSlots
})
}
})
},
增加后每一项都有scopedSlots对象
更多推荐
所有评论(0)