antd-vue中的tree树形控件关于scopedSlots的用法介绍
antd-vue中的tree树形控件关于scopedSlots的用法介绍这是官网的API:效果图:很多时候,我们拿到的数据都是后端返回过来的数据,那如果要用到scopedSlots这个API,仅后端返回的数据是不够的,我们需要处理下,然后在数据中插入一条scopedSlots: { title: ‘custom’ },title是插槽的名字,随意命名即可。treeData的格式:treeData:
·
antd-vue中的tree树形控件关于scopedSlots的用法介绍
这是官网的API:
效果图:
很多时候,我们拿到的数据都是后端返回过来的数据,那如果要用到scopedSlots这个API,仅后端返回的数据是不够的,我们需要处理下,然后在数据中插入一条scopedSlots: { title: ‘custom’ },title是插槽的名字,随意命名即可。
treeData的格式:
treeData: [{
title: 1,
key: 1,//唯一标识
area: 100,
scopedSlots: {
title: 'custom'
},
children: [{
title: 101,
key: 11,//唯一标识
area: 110,
scopedSlots: {
title: 'custom'
},
},{
title: 102,
key: 12,//唯一标识
area: 310,
scopedSlots: {
title: 'custom'
},
}]
}]
然后在template中
<a-tree :treeData="treeData">
<template slot="custom" slot-scope="item" >
<p>
<span>{{ item.title }}</span>
<span style="margin-left: 200px;">{{ item.area }}㎡</span>
</p>
</template>
</a-tree>
补充:关于树选择a-tree-select的扩展
效果图:
也是和树形控件一样的,看官方API
只不过与树形控件有些不同的是,这里好似不可以直接通过在数据中添加scopedSlots={title: ‘自定义命名’},而是用你需要做扩展的字段作为插槽名字的,如果你是需要重新自定义标题(给标题添加插槽)即scopedSlots={title=‘title’},代码如下:
<a-tree-select
show-search
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="Please select"
allow-clear
:tree-data="treeData"
tree-default-expand-all
>
<template slot="title" slot-scope="{ key, addInfo, titleCopy }" style="color: #08c">
<p>
<span>{{ titleCopy }}</span>
<span style="margin-left: 40px; color: orange;">{{ addInfo }}</span>
</p>
</template>
</a-tree-select>
treeData: [{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [{
value: '0-0-1',
key: '0-0-1',
addInfo: '哈哈1',//自己另外要展示的其他信息
titleCopy: 'Child Node1',//如果还需后端返回的标题,可自己处理下把title重新赋值给一个新的字段,因为下面的scopedSlots重定义title会与title字段冲突,如果title字段存在的话,a-tree-select会自动识别title,忽略scopedSlots,导致达不到你想要的的效果。
scopedSlots: { title: 'title', },//自定义的标题插槽
},
{
titleCopy: 'Child Node2',
value: '0-0-2',
key: '0-0-2',
addInfo: '哈哈2',
scopedSlots: { title: 'title', },
},
],
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
},
],
更多推荐
已为社区贡献1条内容
所有评论(0)