ant design vue中想更改a-tree-select的数据键值对名字
首先可以看看https://www.antdv.com/components/tree-select-cn/中的replaceFields 这个参数 你可能就有灵感了 就不用看我废话了// 引入树形结构 replace-fields这个后面就是你要改的格式 value和title是官网给的数据结构的键值对 而name和tit则是要替换的键值对 这样就不会报错了 否则会一直报循环不到键值对<a
·
首先可以看看https://www.antdv.com/components/tree-select-cn/中的 replaceFields 这个参数 你可能就有灵感了 就不用看我废话了
// 引入树形结构 replace-fields这个后面就是你要改的格式 value和title是官网给的数据结构的键值对 而name和tit则是要替换的键值对 这样就不会报错了 否则会一直报循环不到键值对
<a-tree-select
v-model="value"
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:tree-data="treeData"
:replace-fields="{children:'children', key:'key', value: 'name', title: 'tit'}"
placeholder="Please select"
tree-default-expand-all
>
</a-tree-select>
看看页面中的数据:
const treeData = [
{
tit: 'Node1',//按照官方文档这里的键值对应该是title 下面就不写注释了
name: '0-0', //按照光放文档这里的键值对应该是value 下面就不写注释了
key: '0-0',
children: [
{
tit: 'Child Node1', //title
name: '0-0-1', // value
key: '0-0-1',
},
{
tit: 'Child Node2',
name: '0-0-2',
key: '0-0-2',
},
],
},
{
tit: 'Node2',
name: '0-1',
key: '0-1',
children: [
{
tit: 'Child Node2-1',
name: '0-2-1',
key: '0-2-1',
},
{
tit: 'Child Node2-2',
name: '0-2-2',
key: '0-2-2',
},
],
},
];
之后就可以正常显示了
更多推荐
已为社区贡献10条内容
所有评论(0)