vue使用ant design vue 树型控件(tree)
遇到的需求就是一级结构不要checked框,二级结构也不要,三级结构才需要,那么需要怎么做呢,因为人家给的结构是这样子的checkable这个是一定要加的,要不不会显示出来<a-treev-model="checkedKeys"checkable:expanded-keys="expandedKeys":auto-expand-parent="autoExpandParent":select
·
遇到的需求就是一级结构不要checked框,二级结构也不要,三级结构才需要,那么需要怎么做呢,因为人家给的结构是这样子的
checkable这个是一定要加的,要不不会显示出来
<a-tree
v-model="checkedKeys"
checkable
:expanded-keys="expandedKeys"
:auto-expand-parent="autoExpandParent"
:selected-keys="selectedKeys"
:tree-data="treeData"
@expand="onExpand"
@select="onSelect"
/>
// 人家组件给的结构是这样子的,组件的结构
const treeData = [
{
title: '0-0',
key: '0-0',
children: [
{
title: '0-0-0',
key: '0-0-0',
children: [
{ title: '0-0-0-0', key: '0-0-0-0' },
{ title: '0-0-0-1', key: '0-0-0-1' },
{ title: '0-0-0-2', key: '0-0-0-2' },
],
},
{
title: '0-0-1',
key: '0-0-1',
children: [
{ title: '0-0-1-0', key: '0-0-1-0' },
{ title: '0-0-1-1', key: '0-0-1-1' },
{ title: '0-0-1-2', key: '0-0-1-2' },
],
},
{
title: '0-0-2',
key: '0-0-2',
},
],
},
{
title: '0-1',
key: '0-1',
children: [
{ title: '0-1-0-0', key: '0-1-0-0' },
{ title: '0-1-0-1', key: '0-1-0-1' },
{ title: '0-1-0-2', key: '0-1-0-2' },
],
},
{
title: '0-2',
key: '0-2',
},
];
// 当你从后端拿到数据的时候,你需要组装数据,如果后端给你的数据是这个结构那就不需要了,不是的话你就得自己组装数据
res.result.forEach(ywItem => {
ywArr.push({
// checkable就是你需要在哪个结构显示你需要的显示的checked框。
// html里面写的是全部都显示,所以在这儿把checkable写为false就不显示,不写就为显示
checkable: false,
title: ywItem.ywmc,
key: ywItem.id,
children: xmArr
});
});
更多推荐
已为社区贡献15条内容
所有评论(0)