antd的穿梭框的数据貌似只接收key和title,而且必须是字符串(我测试不是字符串的不行),

antdv 穿梭框插图

所以要把后端返回的数据再处理一下得到我们想要的数据antdv 穿梭框插图(1)

除了实现简单的穿梭框功能,还想要重写搜索事件,想达到的效果是搜索到的结果的节点能自动展开且高亮显示

给穿梭框添加show-search

antdv 穿梭框插图(2)

完整代码:


    
    
         item.title"
            :show-select-all="false"
            @change="onChange"
            show-search
            @search="handleSearch"
        >
            
                 {
                        onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
                        }
                    "
                    @select="
                        (_, props) => {
                        onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
                        }
                    "
                >
                
                     -1">
                        {{ name.substr(0, name.indexOf(searchValue)) }}
                        {{ searchValue }}
                        {{ name.substr(name.indexOf(searchValue) + searchValue.length) }}
                    
                    {{ name }}
                
                
            
        
    





::v-deep .transferModal{
    .ant-modal-body{
        max-height: 70vh;
        // overflow-y: auto;
        .tree-transfer{
            height: 100%;
        }
        .ant-transfer-list-body{
            max-height: 300px;
            overflow: auto;
        }
    }
}

实现效果如下:

antdv 穿梭框插图(3)

antdv 穿梭框插图(4) 

本站无任何商业行为
个人在线分享 » antdv 穿梭框
E-->