antd-design-vue tree 自定义插槽

效果图,红色方框内的是自定义得前缀(可以根据自己需求替换icon)

这里是模板代码

<a-tree
   v-model="BatchDeleteTree"
   checkable
   :tree-data="treeData"
   :replace-fields="replaceFields"
   :default-expand-all="true"
   show-icon
 >
    <template slot="type" slot-scope="{ type }">
    <span class="tree-span" v-if="type == 'chapter'">章 :</span>
    <span class="tree-span-s" v-else-if="type == 'section'">课时:</span>
    <span class="tree-span" v-else>节 :</span>
  </template>
</a-tree>

最后在处理treeData数据

 // 给tree每项添加插槽配置
    scopedSlotsFn(params) {
      params.forEach((item) => {
        item.scopedSlots = { icon: 'type' }
        if (item.children) {
          this.scopedSlotsFn(item.children)
        }
      })
      return params
    },

scopedSlots = {icon:'type'} 需要设置自己想要渲染出来的字段