ant vue transfer 使用

• Z时代
• 2024-01-10
• 分类：综合

代码实现逻辑做了返回后端数据处理,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 }

以上是 ant vue transfer 使用 的全部内容， 来源链接： utcz.com/z/374560.html