VUE系列——使用ElementUI的table表格重构穿梭框

前言

首先看一下ElementUI官网给的穿梭框例子

这个穿梭框不符合自己项目的需求，因为左边被选中的到了右边之后，左边的内容已经没有了

一、需求

 把左边选中的内容添加到右边之后，选中的内容继续保留到左边，选中的那几行变颜色

二、重构步骤

step1 使用官网给的table创建左右两个框以及中间的按钮

左边框：

<div class="table-container">
	<el-table
		ref="dxgrid"
		:data="currentPageData"
		highlight-current-row
		@current-change="lineClick"
		:row-style="setColor"
		height="100%"
		style="width: 100%; cursor:pointer;">
		<el-table-column
			prop="MC"
			label="名称"
			show-overflow-tooltip
			width="520">
		</el-table-column>
	</el-table>
</div>

注意：

el-table标签里需要包含 @current-change和 :row-style两个样式

右边框：

<div class="table-container">
	<el-table
		ref="yxgrid"
		:data="yxData"
		<el-table-column
			prop="MC"
			label="名称"
			show-overflow-tooltip
			width="450">
		</el-table-column>
		<el-table-column label="操 作">
			<template slot-scope="scope">
				<el-button
					size="mini"
					type="danger"
					@click="handleDelete(scope.$index, scope.row)">删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
</div>

中间按钮

<div class="select-to-right">
	<div class="select-right-singleSel" @click="singleSel()"></div>
	<div class="select-right-mutiSel" @click="mutiSel()"></div>
</div>

step2 设置变量

currentRowData: null,
currentPageData: [], //左边的数据需要从数据库查询
yxData: [],

step3 js里面写入方法

//选中一行
lineClick(val) {
	this.currentRowData = val;
},
//单选
singleSel() {
	if (JSON.stringify(this.yxData).indexOf(JSON.stringify(this.currentRowData)) == -1) {
		this.yxqyData.push(this.currentRowData);
	}
},
//选择整个页面
mutiSel() {
	this.currentPageData.forEach((item, index) => {
		if (JSON.stringify(this.yxData).indexOf(JSON.stringify(item)) == -1) {
			this.yxData.push(item);
			this.setColor(item, index)
		}
	})
},
//选中之后设置颜色
setColor({row, rowIndex}) {
	if (JSON.stringify(this.yxData).indexOf(JSON.stringify(row)) != -1) {
		return {
			color: 'red',
		}
	}
},

 扩展： ElementUI使用table时，选中某行或者鼠标移入某行时添加背景色

三、效果展示

OK,GAME OVER! 

更多精彩内容请关注：程序员高手之路

回复“vue项目”，免费获取以下项目视频教程