前言
首先看一下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时，选中某行或者鼠标移入某行时添加背景色
三、效果展示
