前言
首先看一下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项目”,免费获取以下项目视频教程