element el-transfer穿梭框的使用,自定义穿梭框的数据项

本文介绍了Element中el - transfer穿梭框的数据项自定义渲染和右侧列表元素变化时触发方法的实现。查看官方文档可了解基本使用,自定义数据项需用Scoped Slot。还给出根据表名查询展示数据库表字段信息的例子,展示了自定义数据项的渲染效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 本文概述
  2. 基本穿梭框效果
  3. 自定义数据项实现
  4. 右侧列表元素变化时触发方法

本文概述

查看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.data
				const 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()方法。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值