Element中Transfer 穿梭框的应用

1、应用背景

项目中会需要对产品进行选择添加，我们可以用Transfer 穿梭框来实现这一需求。

视图：

 

2、代码实现 

<template>
  <div class="bigbox">
    <div class="topInfo">配置产品</div>
    <div class="scollbox" style="text-align: center">
      <el-transfer
        style="text-align: left; display: inline-block"
        :value="tempValue"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :render-content="renderFunc"
        :titles="['未选产品', '已选产品']"
        :button-texts="['', '']"
        :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
        @change="handleChange"
        @right-check-change="rightcheckchange"
        :data="data"
      >
      </el-transfer>
    </div>
    <div class="product-edit-footer">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="saveProduct">确定</el-button>
    </div>
  </div>
</template>

<script>
import {getconfigPlanList}  from "../../../../api/http/product";
export default {
    props:{
        "value" : Array
    },
  data() {
    return {
      data: [],
      //   congfigArr:[],
      configInfomsg: "",
      isBtnAdded: false,
      page: 1,
      perPage: 100,
      value4: [1],
      tempValue:[],
      renderFunc(h, option) {
        return (
          <span>
           {option.label}
          </span>
        );
      },
    };
  },

  watch:{
      value:{
          handler(){
            this.tempValue = this.value.map(item => item.productCode) ;
          },
          immediate : true 
      }
  },

 

  methods: {
    handleChange(value) {
        this.tempValue = value ;
    },

    //    请求列表数据
    async loadPlainList(condition) {
      try {
        this.loading = true;
        let res = await getconfigPlanList(condition);
        // console.log(res);
        this.configInfomsg = res.result.productLibraryList;
        // console.log('数据信息：',this.configInfomsg);
        this.configInfomsg.forEach((item) => {
          // console.log(item.productName);
          this.data.push({
            key: item.productCode,
            label: item.productName,
            // disabled:this.i===0
          });
        });
        if (res["code"] === 0) {
          //   console.log('我是状态码0');
        } else {
          console.log("请求数据失败");
          //   this.$message.error('获取产品列表信息失败')
        }
      } catch (error) {
        this.loading = false;
        // this.$monitor.error(error, MODULE_PRODUCT, '获取产品列表信息异常')
      }
    },
    // 取消按钮
    cancel() {
        this.tempValue = this.value.map(item => item.productCode) ;
      this.$emit("change", false);
    },
    // 保存按钮
    saveProduct() {
        let datas = this.configInfomsg.filter(item => this.tempValue.includes(item.productCode)).map(({productCode,productName}) => {
            return {productCode,productName} ;
        });
        this.$emit("input" , datas) ;
        this.$emit("change", false);
    },
    // 右侧选中数组
rightcheckchange(){
    // console.log(888,arr,check);
},
  },
  mounted() {
    this.loadPlainList({
      // "isProductPlan": 1,
      page: this.page,
      perPage: this.perPage,
    });
  },
};
</script>

<style lang="scss">

.topInfo {
  font-size: 20px;
  margin: 30px 0;
}
.bigbox {
  width: 700px;
  height: 500px;
  background-color: #fff;
  position: relative;
  top: 200px;
  left: 470px;
  overflow: hidden;
}
.selectplan {
  display: flex;
  justify-content: space-between;

  span {
    flex: 1;
    margin: 10px 0px;
  }
}
.inputInfo {
  position: relative;
  margin-bottom: 15px;
  margin: 25px 0px;
  .findInfo {
    // background-color: red;
    position: relative;
    left: -140px;
  }
  .rest {
    // background-color: red;
    position: relative;
    left: -130px;
  }
}
.el-transfer-panel__item .el-checkbox__input {
  position: absolute;
  top: 8px;
  left: 10px;
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
.el-transfer-panel {
  width: 225px;
}
.el-transfer-panel__filter .el-input__inner {
  width: 90%;
}
.el-transfer-panel__filter {
  margin: 13px 0;
}
.product-edit-footer {
  margin: 45px 0px;
  button {
    margin: 0px 20px;
  }
}
</style>