vue elementui el-transfer

注意：穿梭框是key,label作为键

this.dataArr.push({
                key: item.TABLE_NAME,
                label: item.TABLE_NAME
 })

<template>
  <el-dialog title="关联数据表" :visible.sync="innerVisible" width="30%" append-to-body>
    <div>
      <el-transfer v-model="relateTableArr" :data="dataArr" 
      :titles="['请选择数据表', '已选数据表']" @change="handleChange">
      </el-transfer>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="upPage" size="small">上一步</el-button>
      <el-button type="primary" @click="addDatasource" size="small">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from 'element-ui'
export default {
  name: 'addDTable',
  data() {
    return {
      innerVisible: false,
      relateTableArr: [],
      dataArr: [],
      relateTableStr: '',
      obj: {},
    }
  },
  methods: {
    show(dataSourceForm) {
      console.log(dataSourceForm)
      this.obj = dataSourceForm
      this.innerVisible = true
      if (dataSourceForm.state) {
        this.relateTableArr = []
      } else {
        var arr = []
        arr = dataSourceForm.tableSelected.split('|')
        this.relateTableArr = arr
      }
      this.dataArrMethod(dataSourceForm)
    },
    // 列出指定数据库所有表
    dataArrMethod(dataSourceForm) {
      this.dataArr = []
      this.$http
        .post(url, {
          dbName: dataSourceForm.dbName,
          host: dataSourceForm.host,
          port: dataSourceForm.port,
          dbType: dataSourceForm.dbType,
          userName: dataSourceForm.userName,
          password: dataSourceForm.password,
          name: dataSourceForm.name
        })
        .then(res => {
          if (res.data.success) {
            console.log(res.data.data)
            let arr = []
            arr = res.data.data.result
            arr.forEach((item)=>{
              this.dataArr.push({
                key: item.TABLE_NAME,
                label: item.TABLE_NAME
              })
            })
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleChange(value, direction, movedKeys) {
      this.relateTableArr = value
    },
    // 上一步
    upPage() {
      this.innerVisible = false
      this.$emit('child',0)
    },
    // 修改数据库,数据库添加
    addDatasource() {
      this.relateTableStr = this.relateTableArr.join('|')
      let _url = ''
      let params = {}
      if (this.obj.editTypeValue) {
        _url = url
        params = {
          dbName: this.obj.dbName,
          dbType: this.obj.dbType,
          host: this.obj.host,
          port: this.obj.port,
          userName: this.obj.userName,
          password: this.obj.password,
          name: this.obj.name,
          orgId: this.obj.orgId,
          orgName: this.obj.orgName,
          tableSelected: this.relateTableStr,
          id: this.obj.rowId
        }
      } else {
        _url = url
        params = {
          dbName: this.obj.dbName,
          dbType: this.obj.dbType,
          host: this.obj.host,
          port: this.obj.port,
          userName: this.obj.userName,
          password: this.obj.password,
          name: this.obj.name,
          orgId: this.obj.orgId,
          orgName: this.obj.orgName,
          tableSelected: this.relateTableStr
        }
      }
      this.$http
        .post(_url, params)
        .then(res => {
          if (res.data.success) {
            if (this.obj.editTypeValue) {
              Message.success('编辑成功')
            } else {
              Message.success('添加成功')
            }
            this.innerVisible = false
            this.$emit('child') // 通过这个链接到addDBM页，在addDBM页中在调用dbm页的表格刷新
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>
/* .edit-input {
  padding-right: 100px;
} */
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>