- 本文概述
- 基本穿梭框效果
- 自定义数据项实现
- 右侧列表元素变化时触发方法
本文概述
查看element官方文档可以了解到 el-transfer穿梭框的基本使用方法，本文主要介绍数据项的自定义渲染和右侧列表元素变化时触发方法的实现。
自定义数据项，除了基本的el-transfer使用方法，还需要使用Scoped Slot。
实现效果
基本穿梭框效果
查看官方文档，Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标识，label 为显示文本，disabled 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model 的变量，值为数据项的 key 所组成的数组。
实现效果如下图
自定义数据项实现
本例为根据表名查询展示数据库表字段信息的例子
先获取数据源，这里我们的数据，除了必须的key和label之外，还有所属表名和字段注释
data() {return {tableName: [], //数据表名transferData: [], //Transfer 的数据源 array[{ key, label, disabled }]checked: [], //穿梭框绑定的数据，选定到右侧框中的数据项的value组成的数组}
},
methods: {//根据数据表名，从后台获取各个表的所有字段的相关信息fetchData() {this.$store.dispatch('getTableColumnInfo', this.tableName).then(res => {if(res.data.code == 1) {const allData = res.data.dataconst data = [];for(let i = 0; i < allData.length; i++) {data.push({key: allData[i].rownum,label: allData[i].name,comment: allData[i].comment,tabname: allData[i].tabname});}this.transferData = data;} else {this.$message.error('表字段查询失败')}}).catch(error => {this.$message.error(error)})},//右侧列表元素变化时触发getObject() {console.log(“选中的数据有” + this.checked)},
},
template如下代码： v-model :data绑定数据
在<el-transfer></el-transfer>标签中，使用<span slot-scope="{ option }"></span>来自定义数据项，这里在保留原来label的基础上，在右侧增加了数据库表名和注释的显示，并且设置了较小较暗的字体来与label进行区分。
<el-transfer v-model="checked" :data="transferData" @change="getObject"><span slot-scope="{ option }">{{ option.label }}<span style="float: right; color: #8492a6; font-size: 13px; padding-left: 10px;padding-right: 15px;">{{ option.tabname }}</span><span style="float: right; color: #8492a6; font-size: 13px; padding-left: 10px;">{{ option.comment }}</span></span>
</el-transfer>
效果如下图
右侧列表元素变化时触发
使用@change="getObject"方法，右侧列表元素变化时触发getObject()方法。
