ant vue transfer 使用
代码实现逻辑做了返回后端数据处理,id映射为key值,suite_name 映射为title,这是一个这种的处理方法,因为不想改动组件太多东西,主要注意点就是那个renderItem value 必须为String类型:
xxxxxxxxxxxxx
源代码:
<template> <div> <div class="transfer-selection"> <a-popover> <template slot="content"> 左边为数据源,右侧为要提交的数据 </template> <span style="color:yellowgreen" ></span>温馨提示 </span><a-icon type="question-circle" /> </a-popover> </div> <div > <a-transfer :data-source="mockData" :list-style="{ width: '300px', height: '300px', }" :target-keys="targetKeys" :render="renderItem" @change="handleChange" /> </div> </div> </template> <script> import {api} from '@/common/api.js' export default { data() { return { mockData: [], targetKeys: [], suites:[] }; }, mounted() { this.getMock(); }, methods: { // async GetSuitesList(){ let {data} = await api.get('demo-service/api/testsuite') console.log(data) return data }, async getMock() { const targetKeys = []; const mockData = []; let res = await this.GetSuitesList(); for (let item of res) { let data = { key:JSON.stringify(item.id), // value must be string type title: item.suite_name, }; mockData.push(data); } this.mockData = mockData; this.targetKeys = targetKeys; }, renderItem(item) { const customLabel = ( <span class="custom-item"> {item.title} </span> ); return { label: customLabel, // for displayed item value: item.title, // for title and filter matching }; }, handleChange(targetKeys, direction, moveKeys) { console.log(targetKeys, direction, moveKeys); this.targetKeys = targetKeys; }, }, }; </script> <style lang="less"> .transfer-selection{ margin-bottom:30px ; } </style>
src/common/api.js
import axios from 'axios' const qs = require('qs') const api = { async get (url, data) { try { let res = await axios.get(url, {params: data}) res = res.data return new Promise((resolve) => { if (res.code === 200) { resolve(res) } else { resolve(res) } }) } catch (err) { console.log(err) } }, async post (url, data) { try { let res = await axios.post(url, qs.stringify(data)) res = res.data return new Promise((resolve, reject) => { if (res.code === 200) { resolve(res) } else { reject(res) } }) } catch (err) { // return (e.message) console.log(err) } }, } export { api }