Element穿梭框Transfer使用心得

丑话说在前头

1、不要以为Transfer左右两边的数据是分别查询的！！！

2、左边是数据源，即:data，理解为【未选成员】--定义字段为：notChoiceDataList

3、右边是value/v-model，理解为【已选成员】--定义字段为：choiceDataList

4、数据源的意思是：要我们永远查询全部，queryAll，所以notChoiceDataList为后台的全部数据

Transfer实例

 

 

 源码：

      <el-form-item label="部门成员">
        <el-transfer
          filterable
          filter-placeholder="请教师姓名"
          :titles="['未选择成员', '已选择成员']"
          :props=teacherListTransferProps
          :data="notChoiceDataList"
          v-model="choiceDataList">
        </el-transfer>
      </el-form-item>

        // Transfer数据源的字段别名
        teacherListTransferProps: {
          key: 'teacherId',
          label: 'name'
        },

              for (let i = 0; i < 15; i++) {
                this.notChoiceDataList.push({
                  teacherId: i,
                  name: '成员' + i
                })
                if (i % 3 === 0) this.choiceDataList.push(i)
              }

注意

1、不论是 新增 或 修改 我实际代码中 notChoiceDataList 都是不变的

            // 未选成员永远为全部教师
            this.notChoiceDataList = this.teacherList
            if (!this.dataForm.deptId) {
              // 新增
              this.deptListTreeSetCurrentNode()
              // 已选成员为空
              this.choiceDataList = []
            } else {
              // 修改
              this.$http({
                url: this.$http.adornUrl(`/business/sysdept/info/${this.dataForm.deptId}`),
                method: 'get',
                params: this.$http.adornParams()
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.dataForm.id = data.dept.deptId
                  this.dataForm.type = data.dept.type
                  this.dataForm.parentId = data.dept.parentId
                  this.dataForm.personId = data.dept.personId
                  this.dataForm.name = data.dept.name
                  this.dataForm.phone = data.dept.phone
                }
              })
              // 查询已加入部门成员的teacherId
              this.$http({
                url: this.$http.adornUrl('/business/teacherofdept/choicetealist'),
                method: 'get',
                params: this.$http.adornParams({
                  'deptId': this.dataForm.deptId
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  var choiceTea = data.data
                  // choiceDataList只存放id
                  for (let i = 0; i < choiceTea.length; i++) {
                    this.choiceDataList.push(choiceTea[i].teacherId)
                  }
                }
              })
            }

2、el-transfer会自动从数据源中分离数据，notChoiceDataList  永不变，修改时 choiceDataList 只保存id数组