先看下效果：

放一个流弊的官网API： http://element-cn.eleme.io/#/zh-CN/component/transfer 

 将官网的demo复制粘贴到代码中：

            <el-form-item  label="关联区域" prop="areaIdStrArry">
              <template>
              <el-transfer filterable :filter-method="filterMethod" :titles="['未关联区域', '已关联区域']" filter-placeholder="请输入区域名称"
                v-model="editForm.areaIdStrArry" :data="data2">
              </el-transfer>
            </template>
            </el-form-item>

 /**获取所有区域列表 */
    getAllAssetAreas() {
      let area_id =[];
      let area_name = [];
      var data= [];
      areaSettingAPI.getAllAssetAreas({}, res => {
        if (res) {
          this.area = res;
          for (const key in res) {
            if (res.hasOwnProperty(key)) {
              const res1 = res[key];
              //console.log(res1.id);
              area_id.push( res[key].id);//区域id数组
              area_name.push( res[key].name);//区域名称数组
            }
          }
        }

      area_name.forEach((areaName, index) => {
        //console.log(index);
          data.push({
            label: areaName,
            key: area_id[index],
            searchAreaName: area_name[index]
          });
      }); 
      //this.data2=data;
      });
      return data;

    },





 /**打开添加弹框 */
    addAreaSettingDialog() {
      this.data2 = this.getAllAssetAreas();
      //console.log(this.getAllAssetAreas());
      this.addDialogFormVisible = true;
      setTimeout(() => {
        __punch.to(
          this.$refs.dialog,
          this.loginUser.username + this.loginUser.email,
          {}
        );
      }, 200);
      this.resetForm("addForm");
    },
    /**添加 */
    btnAdd(addForm) {
      //校验表单
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          var _this = this;
          _this.areaIdStr = "";
          this.addForm.areaIdStrArry.forEach(function(e) {
            _this.areaIdStr = e + "," + _this.areaIdStr;
          });
          let param = {
            userId: this.addForm.userId,
            userName: this.addForm.userName,
            areaIdStr: this.areaIdStr
          };
          //请求后台
          authSettingAPI.saveAssetAuth(param, res => {
            if (res) {
              (this.addDialogFormVisible = false), this.btnPageList();
              this.btnReset();
              this.resetForm("addForm");
              this.messageSuccess("添加成功！");
            } else {
              this.messageError("添加失败");
            }
          });
        } else {
          //校验失败
          return false;
        }
      });
    },
    /**打开编辑弹框 */
    editAuthSettingDialog(row) {
      let param = {
        userId: row.userId
      };
      //请求后台
      authSettingAPI.getAssetAuthByUserId(param, res => {
        if (res) {
          this.editForm.areaIdStrArry = []; //清空之前关联区域
          var _this = this;
          res.assetAuthList.forEach(function(e) {
            _this.editForm.areaIdStrArry.push(e.areaId);
          });
          this.editForm.userName = res.userName;
          this.editForm.userId = res.userId;
          this.editDialogFormVisible = true;
        }
       // console.log(this.editForm.areaIdStrArry);
      });
      setTimeout(() => {
        __punch.to(
          this.$refs.dialog,
          this.loginUser.username + this.loginUser.email,
          {}
        );
      }, 200);
    },