ant design vue ＜a-transfer＞简单穿梭框实现

原创已于 2023-02-21 14:27:52 修改 · 1.8k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

于 2023-02-17 09:37:21 首次发布

前端专栏收录该内容

59 篇文章

订阅专栏

该文章展示了如何在Vue中使用AntDesignVue的Transfer组件，从数据库获取数据（包括id和name）并渲染到穿梭框中，同时设置验证规则和处理变更事件。在created生命周期钩子中，通过Promise.all同步调用API获取数据并转换成组件所需的格式。

效果图

Vue

<template>                
    <a-transfer
    :data-source="assessPeople"
    :target-keys="targetKeys"
    :render="item => item.title"
    v-decorator="['userId', {
    rules:[{required:true,message:'请选择'}]
    }]"
    @change="handleChange"
    />
</template>

<script>
export default {
  data() {
    return {
      assessPeople: [],
      targetKeys: [],
    };
  },
  methods: {
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys;
    },
  },
    created() {
      Promise.all([
        AssessmentTaskApi.listByAssessPeople().then(result => {//调用方法从数据库取数据
          this.assessPeople = result//result为String数组[0]李四，[1]德标
          const assessPeople = []
          for(let i = 0;i < this.assessPeople.length;i++){
            const data = {
              key: i.toString(),
              title: `${this.assessPeople[i]}`,
              description: `description of ${i}`,
            }
            assessPeople.push(data)
          }
          this.assessPeople = assessPeople
        }),
      ]).catch(error => {
        error.message && this.$message.error(error.message)
        this.visible = false
      })
    }
};
</script>

本文基于antd 第二个穿梭框改造

穿梭框 Transfer - Ant Design Vue (antdv.com)

补充：

正常从数据库获取人的名字同时还要获取它的id，后端我选择用实体类集合接收传到前端

    created() {
      this.handler.show = this.show
      Promise.all([
        AssessmentTaskApi.listByAssessPeople().then(result => {
          // console.log('result',result)
          // console.log('result.list',result.list)
          const assessPeople = []
          const resultList = result.list
          for(let i = 0;i < resultList.length;i++){
            const data = {
              key: `${resultList[i].id.toString()}`,
              title: `${resultList[i].name}`,
              description: `description of ${i}`,
            }
            assessPeople.push(data)
          }
          this.assessPeople = assessPeople
          this.targetKeys = []//每次打开时待选项都在左侧
        }),
      ]).catch(error => {
        error.message && this.$message.error(error.message)
        this.visible = false
      })
    }