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

效果图

Vue

本文基于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
      })
    }

控制台：

PS:方法也可以转到show()下，如果有需求的话