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()方法。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐