网上有很多文章是用slot=“title”插槽渲染,我试了之后一直都渲染不出来。
应该是因为后端返的数据格式不是树要的格式,所以我先用replaceFields
{children:‘children’, title:‘title’, key:‘key’ }替换了,它的优先级比插槽高,所以title插槽不起作用

用自定义插槽后能显示

  			<a-tree
              :tree-data="treeData"
              @select="onSelect"
              :replace-fields="replaceFied"     
             >
              <template slot="custom" slot-scope="item">         
                  <span>{{ item.fVcGroupName }}</span>       
                    <!-- 新增同级 -->
                    <!-- <a-icon v-show="!item.isPeople" type="plus" class="iconplus iconSame" @click="changeTongji" /> -->
                    <!-- 新增子级 -->
                    <a-icon v-show="!item.isPeople" type="plus" class="iconplus " @click="changeFulevel(item)" />
                    <!-- 编辑同级 -->
                    <a-icon v-show="!item.isPeople" type="edit" class="iconplus" @click="onEdit(item)" />
                    <!-- 删除同级 -->
                    <a-icon v-show="!item.children" type="close" class="iconplus iconLast" @click="onRemove(item)" />   
              </template>
            </a-tree>

在调用树数据的接口里,设置custom,并在循环的时候增加scopedSlots字段

 // 查询分类列表--树数据
    getTreeList() {
    Treelist().then(res => {
        if (res && res.code == 0) {
          const scopedSlots = {
            title: 'custom'                  
         res.forEach(item => {
            item.scopedSlots = scopedSlots          
          })      
        }
      })
    },

增加后每一项都有scopedSlots对象
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐