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',
      },
],
Logo

鸿蒙生态一站式服务平台。

更多推荐