Element穿梭框的基本使用

不废话直接开始看一个适用度比较高的基本的代码

<div>

    <div>配置适用大类</div>

        <div class="scollbox" style="text-align: center">
              
              <el-transfer
              style="text-align: left; display: inline-block"
              v-model="checked"
              :data="transferData"
              @change="getObject"
              :titles="['全部大类', '已选大类']"
              :button-texts="['', '']"
              :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}'
              }">
            </el-transfer>

        </div>
</div>

这段代码的展示图:

参数解释:(只解释用得上的,因为没用上的我也不知道)

v-model:右边的穿梭框的值
:data:穿梭框的数据,就类似于Table表格的tableData,是一个对象数组,
    key 为数据的唯一性标识，label 为显示文本(如上面的格力)
@change:每次穿梭框数据发生改变时触发的函数(左边到右边右边到左边)
:titles:两边穿梭框的标题的

所以,我们可以通过一个函数,将查询的数据遍历,然后将我们需要的数据添加到 transferData这个数组里面:例子如下:

      //查询所有大类
      selAllProduc(){
        //暂存我们的数据
        this.data=[]

        this.allProduc=[]

        this.$http.get("/productHigh/getAll").then(resp=>{
          //接收后端返回的数据
          this.allProduc=resp.data.data
            //循环这个数组
          for(var i=0;i<this.allProduc.length;i++){
            //往这个数组中添加对象:有两个属性,key和label,上面解释这两个属性是什么意义
            this.data.push({
              key:this.allProduc[i].productId,
              label:this.allProduc[i].productName,
            })
          }
        //赋给穿梭框的数据数组    
          this.transferData = this.data;
          console.log(this.transferData)
        })
      },

每次右边穿梭框发生改变时触发的函数:

 getObject() {
     console.log("选中的数据有" + this.checked)
},

如果初始化穿梭框的时候,右边需要有值,我们可以直接往v-modeld绑定的数组里面添加 transferData里对象的key的值即可,这样他会自动把右边已经有的数据转移到右边:

代码:

效果图:

 

大致就是这样,如有错误请指正,不明白的可以私信我