穿梭框数据渲染问题（事件转移）

根据穿梭框，在刚打开这个穿梭框的时候，右边默认是有数据的，基础的穿梭框只有左侧有数据，通过左侧移入到右侧，

 

基础用法：

<template>
  <el-transfer v-model="value" :data="data"></el-transfer>
</template>

<script>
  export default {
    data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        data: generateData(),
        value: [1, 4]
      };
    }
  };
</script>

value及为右侧的数据，value虽然定义的是一个数据，但是数组里面存储的是key的值。

所以让右侧有数据获取右边数据的key值，存储在value数组中

例：value:[ ]//右侧显示的数据

        List:[ ];将list里面的数据显示在右侧：

    

const data = []
this.List.map((item, index) => {
  const tt = item.id + item.type// 存储的为List的key值
  dataRight.push({
    key: tt,
    label: item.title,
    type: item.type,
    id: item.id,
    title: item.title
  })
  data.push(tt)//将值赋给data
})
this.value = Object.assign([], data)//将值付给value

完整代码：

<template>
  <div class="connect_container">
    <el-dialog
      width="800px"
      title="关联事项"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="epic_list">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="史诗:">
            <el-select v-model="value" filterable placeholder="请选择" @change="selectChanged(value)">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.epicTitle"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="options.length>0" v-loading="loading" style="text-align: center">
        <el-transfer
          v-model="value1"
          style="text-align: left; display: inline-block"
          filterable
          :titles="['当前史诗', '目标史诗']"
          :button-texts="['', '']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          :data="leftData"
          @left-check-change="change"
          @change="handleChange"
        >
        </el-transfer>
      </div>
      <div v-if="this.options.length <= 0" v-loading="loading" style="text-align: center">
        <el-transfer
          style="text-align: left; display: inline-block"
          filterable
          :titles="['当前史诗', '目标史诗']"
          :button-texts="['', '']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          :data="epicItemList"
          @left-check-change="change"
          @change="handleChange"
        >
        </el-transfer>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as epicApi from '@/api/epicManage/list'
export default {
  name: 'Connect',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    epicId: {
      type: Number,
      default: null
    },
    itemId: {},
    defaultEpicList: {
    },
    // 当前史诗关联的事项列表
    epicItemList: {
    }
  },
  data() {
    return {
      leftData: [],
      options: [],
      // 右侧数据
      value1: [],
      checked: [],
      // 选中的数据
      value: '',
      id: '',
      epicTitle: '',
      dataRight: [],
      epicList: [],
      loading: false
    }
  },
  watch: {
    visible(n, o) {
      if (n === true) {
        this.loading = true
        console.log('epicList', this.epicList)
        console.log('epicListItem', this.epicItemList)
        this.fetchData()
        console.log('watch渲染了左侧数据')
        if (this.options.length > 0) {
          console.log('watch 数组大于0')
          this.leftData = Object.assign([], this.epicItemList)
        }
      }
    }
  },
  created() {
    console.log('created fetchData（）')
    this.fetchData()
  },
  methods: {
    // 左侧数据变化
    change(val) {
      this.checked = val
      console.log('checked', this.checked)
      if (this.value === '') {
        this.checked.length = 0
        this.$message({
          type: 'warning',
          message: `请选择一个目标史诗！`
        })
      }
    },
    //  史诗列表下拉
    selectChanged(val) {
      this.id = val
      let obj = {}
      obj = this.options.find(function(item) {
        return item.id === val
      })
      this.epicTitle = obj.epicTitle
      this.getEpicItemByEpicId()
    },
    // 获取当前用户的其他史诗列表
    fetchData() {
      const that = this
      const params = {}
      params.pageCurrent = 1
      params.pageSize = 999
      params.projectId = this.itemId
      that.loading = true
      epicApi.listEpic(params).then(res => {
        that.loading = false
        // 将史诗id为this.epicId的过滤掉
        that.options = res.epicBoList && res.epicBoList.filter(function(value, index, array) {
          return value.id !== that.epicId
        })
        this.value = ''
        console.log('options', that.options)
        console.log('optionsLength', that.options.length)
        // 获取第一个史诗列表的第一个史诗id
        if (that.options.length >= 1) {
          console.log('option的长度为1')
          that.id = res.epicBoList && res.epicBoList.filter(function(value, index, array) {
            return value.id !== that.epicId
          })[0].id
          this.epicTitle = res.epicBoList && res.epicBoList.filter(function(value, index, array) {
            return value.id !== that.epicId
          })[0].epicTitle
          this.value = this.epicTitle
          console.log('value', this.value)
          this.getEpicItemByEpicId()
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 根据史诗id查询获取史诗事项
    getEpicItemByEpicId() {
      const param = {
        epicId: this.id
      }
      const that = this
      that.leftData = Object.assign([], this.epicItemList)
      epicApi.getEpicItemByEpicId(param).then(res => {
        const data = []
        const dataRight = []
        res.epicItemList && res.epicItemList.map((item, index) => {
          const tt = item.id + item.type
          dataRight.push({
            key: tt,
            label: item.title,
            type: item.type,
            id: item.id,
            title: item.title
          })
          data.push(tt)
        })
        this.value1 = Object.assign([], data)
        that.value1 = Object.assign([], data)
        dataRight.map(item => {
          that.leftData.push({
            key: item.key,
            label: item.title,
            type: item.type,
            id: item.id,
            title: item.title
          })
        })
        const obj = {}
        // 设置了初始值[]
        that.leftData = that.leftData.reduce((cur, next) => {
          obj[next.key] ? '' : obj[next.key] = true && cur.push(next)
          return cur
        }, [])
      }).catch((err) => {
        console.log(err)
      })
    },
    // 点击按钮转移数据
    handleChange(val, position, arr) {
      const epicItemListArray = []
      const params = {}
      // 从左往右
      if (position === 'right') {
        this.leftData.map(item => {
          arr.map(j => {
            if (j === item.key) {
              epicItemListArray.push({
                id: item.id,
                title: item.title,
                type: item.type
              })
            }
          })
        })
        params.epicItemList = epicItemListArray
        params.epicFrom = this.epicId
        params.epicTo = this.id
        console.log('val', arr)
      } else {
        // 从右往左
        this.leftData.map(item => {
          arr.map(j => {
            if (j === item.key) {
              epicItemListArray.push({
                id: item.id,
                title: item.title,
                type: item.type
              })
            }
          })
        })
        params.epicItemList = epicItemListArray
        params.epicFrom = this.id
        params.epicTo = this.epicId
      }
      epicApi.updateEpicItem(params)
        .then(res => {
          if (res.code === 200) {
            // 更新成功 - 左侧数据需要同步更新 - 刷新当前史诗列表及右侧数据列表
            const param = { epicId: this.epicId }
            // 左侧
            this.fetchCurrentItems(param)
            this.getEpicItemByEpicId() // 右侧
            this.$message.success('事项转移成功')
          }
        })
        .catch()
    },
    fetchCurrentItems(param) {
      // 获取当前史诗的事项列表
      epicApi.getEpicItemByEpicId(param).then(res => {
        const data = []
        res.epicItemList && res.epicItemList.map((item, index) => {
          data.push({
            key: item.id + item.type,
            label: item.title,
            type: item.type,
            id: item.id,
            title: item.title
          })
          this.leftData.push({
            key: item.id + item.type,
            label: item.title,
            type: item.type,
            id: item.id,
            title: item.title
          })
        })
        this.epicItemList = Object.assign([], data)
        const obj = {}
        this.leftData = this.leftData.reduce((cur, next) => {
          obj[next.key] ? '' : obj[next.key] = true && cur.push(next)
          return cur
        }, [])
      }).catch((err) => {
        console.log(err)
      })
    },
    handleClose() {
      this.$emit('close-callback')
    },
    onSubmit() {
    }
  }
}
</script>
<style lang="scss" scoped>
.connect_container{
  ::v-deep .el-dialog__body{
    border-top: 1px solid #eeeeee;
  }
  .epic_list{
    float: right;
    margin-right: 75px;
    margin-bottom: 12px;
    .el-select{
      width:150px
    }
  }
}

</style>

让穿梭框右侧有初始值：