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數組