基础使用
<template> <el-transfer :data="data" v-model="value"></el-transfer> </template> <script> data () { // data需要包含key跟label。是左边穿梭框所有的数据,value是右边的数据。 data: [ {key: '1', label: '苹果'}, {key: '2', label: '梨'}, {key: '3', label: '香蕉'}, {key: '4', label: '橘子'} ], // value是key组成的数据 value: ['1', '2'], // value有值时为左下图所示,会自动从左边分离数据不会重复。 value: [] // value为空时为右下图所示。 } </script>Transfer 的数据通过 data 属性传入。数据需要是一个对象数组,每个对象有以下属性:key 为数据的唯一性标识,label为显示文本,disabled 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model 的变量,值为数据项的 key 所组成的数组。
只取当前点击的id
<el-transfer filterable @left-check-change="searchVolInfo" @right-check-change="searchVolInfo" filter-placeholder="人名搜索" v-model="form.allocated" :data="form.undistributed"> </el-transfer> // 第一个参数是选中的所有的数据数组,第二个参数是当前点击的那个的数组 searchVolInfo(data, currentData) { if (currentData.length === 1) { // 操作操作 } },空行问题解决
.el-checkbox.el-transfer-panel__item { display: block; }参考:https://blog.csdn.net/SangHongxv/article/details/85060929