VUE Element-ui transfer 使用心得

VUE Element-ui transfer 使用心得

前段时间由于项目中需要写穿梭框 在网上找了很多例子都不太符合业务需求
先上图 看看我的大体业务场景


这些是新建时候的业务场景这个业务场景很简单


这是编辑业务场景主要是回显

<template>
 	<div>
	 <div class="transfer_box">
	          <span class="transfer_element">气象要素</span>
	          <div class="element_frame">
	            <div v-for="(item, index) in dataElemendata" :key="index">
	              <div>
	                {{ item && item.varName }}
	              </div>
	            </div>
	          </div>
	          <div class="eleSelect">
	            <el-button size="small" type="primary" @click="selectElement"
	              >选择</el-button
	            >
	          </div>
	          <el-dialog
	            class="innerDialog"
	            :visible.sync="dialogFormtransfer"
	            append-to-body
	            width="800px"
	            :before-close="innerDialogClose"
	            :close-on-click-modal="false"
	            :close-on-press-escape="false"
	          >
	            <template class="transfer_dialog">
	              <el-transfer
	                v-model="dataSelected"
	                :data="requestData"
	                :titles="['可选', '已选']"
	                filterable
	                filter-placeholder="请输入要素名称"
	                :props="{
	                  key: 'varCode',
	                  label: 'varName'
	                }"
	              ></el-transfer>
	              </div>
            </template>
            这是html
 <script>
 export default {
 data() {
	return {
	  dataElemendata: [], //渲染DIV
      dataSelected: [], //已选中数据
      requestData: [], //全部气象数据
}
},
 created() {
    this.dialogStateChange();
    this.getDicData();
    this.userName = localStorage.getItem("userName");
    this.getElementAlldata();//后台请求气象数据 
  },
  methods: {
  getElementAlldata() {
      getMeteorolEleList().then(res => {
        this.requestData = res.data;
      });
    },
    向后台请求气象数据放到requestData里面
    getDataBySelected(id) {
    let requestData = this.requestData;
      for (
        let i = 0,
        i < requestData.length;
        i++
      ) {
        if (id === requestData[i].varCode) {
          return requestData[i];
        }
      }
    },
    这步是要遍历 后台传来的气象数据 我要取到其中的varCode值
     handlhandltransfer() {
      const newData = [];
      for (
        let i = 0, dataSelected = this.dataSelected;
        i < dataSelected.length;
        i++
      ) {
        newData.push(this.getDataBySelected(dataSelected[i]));
      }
      this.dataElemendata = newData;
      let dataElemendata = this.dataElemendata;
       // 处理成vars，以便给后端传数据用
      let varCode = [];
      for (let j = 0; j < dataElemendata.length; j++) {
        this.form.varCode = dataElemendata[j].varCode;
        varCode.push(this.form.varCode);
      }
      this.vars = varCode.join(",");
    },
     // //通过要素的code找出对应的 要素数据
    getElementByVar(key) {
      // 所有的气象要素
      let requestData = this.requestData;
      for (let i = 0; i < requestData.length; i++) {
        if (key === requestData[i].varCode) {
          return requestData[i];
        }
      }
    },
     renderVars(vars) {
      let varCodes = vars.split(",");
      let allArr = []; // ['风', '温度']
      for (let i = 0; i < varCodes.length; i++) {
        allArr.push(this.getElementByVar(varCodes[i]));
      }
      this.dataElemendata = allArr;
    },
       //处理编辑 穿梭框已选中回显
    selectElement() {
      if (this.state === 1) {
        this.dialogFormtransfer = true;
        const dataElemendata = this.dataElemendata;
        let dataArr = [];
        for (let i = 0; i < dataElemendata.length; i++) {
          dataArr.push(dataElemendata[i].varCode);
        }
        this.dataSelected = dataArr;
        console.log(this.dataSelected);
      } else if (this.state === 0) {
        this.dialogFormtransfer = true;
      }
    },
       //点击确定  气象要素  保存到dialog
    save() {
      if (this.state === 0) {
        this.handlhandltransfer();
        this.dialogFormtransfer = false;
      } else if (this.state === 1) {
        this.handlhandltransfer();
        this.dialogFormtransfer = false;
      }
    },
   //后台给的方法用作处理编辑时候回显
      getItemById(id) {
      getDataProductById(id).then(res => {
        this.insertDt = res.data.insertDt;
        this.fileNum = res.data.fileNum;
        this.form.fileType = res.data.fileType;
        this.form.fileName = res.data.fileName;
        this.form.fileCode = res.data.fileCode;
        this.form.path = res.data.path;
        this.form.interval = res.data.interval;
        this.form.space = res.data.space;
        this.form.rate = res.data.rate;
        this.form.scope = res.data.scope;
        this.form.height = res.data.height;
        this.form.ower = res.data.ower;
        this.vars = res.data.vars;
        getMeteorolEleList().then(res => {
          this.requestData = res.data;
          this.renderVars(this.vars);
        });
      });
    },
    // 表单状态控制
    dialogStateChange() {
      if (this.state === 0) {
        this.title = "新 建";
      } else if (this.state === 1) {
        this.title = "编 辑";
        if (this.itemId) {
          // 发送请求，请求当前数据
          this.getItemById(this.itemId);
        }
      }
    },
}
}
</script>
这是后台给接口显示数据的时候

后台不给发方前端处理

  <el-button type="primary" size="mini" @click="edit(scope.$index ,scope.row)"
            >编辑</el-button
          >
//js
 edit(row,index) {
      const id = row.id;
      this.itemId = id;
      this.dialogState = 1;
      this.dialogFormVisible = true;
      console.log(row.vars);
      this.form = Object.assign({}, row);
      this.renderVars(row.vars);
    },

这是我使用的心得