需求:做个一左一右的穿梭框,就是数据交换,使用el-transfer虽然可以实现,但是要做多列表形式的实现不了,所以使用el-table实现
实现效果如下图:
点击左边选中后点击按钮移到右边列表
<el-row :gutter="20">
<el-col :span="10">
<!-- 穿梭框左边 -->
<el-table
ref="multipleTable"
:data="tableData1"
height="300"
tooltip-effect="dark"
style="width: 100%"
@select="checkLeft"
@select-all="checkAll"
class="el-table-dialog"
row-key="id"
>
<el-table-column
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column type="index" label="序号" align="center">
</el-table-column>
<el-table-column label="编号" align="center">
<template slot-scope="{ row }">
<span>{
{ row.nickName }}</span>
</template>
</el-table-column>
<el-table-column label="类型" align="center">
<template slot-scope="{ row }">
<span>{
{ row.nickName }}</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="4" class="el-btn-dialog">
<el-button
@click="right"
type="primary"
:disabled="nowSelectData.length ? false : true"
icon="el-icon-arrow-right"
>加入右侧</el-button
>
<el-button
@click="left"
type="primary"
:disabled="nowSelectRightData.length ? false : true"
icon="el-icon-arrow-left"
style="margin-left: 0;margin-top: 10px;"
>加入左侧</el-button
>
</el-col>
<el-col :span="10">
<!-- 穿梭框右边 -->
<el-table
ref="multipleTable"
:data="tableData2"
max-height="300"
tooltip-effect="dark"
style="width: 100%"
@select="checkRight"
@select-all="checkRightAll"
row-key="id"
class="el-table-dialog"
>
<el-table-column
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column type="index" label="序号" align="center">
</el-table-column>
<el-table-column label="编号" align="center">
<template slot-scope="{ row }">
<span>{
{ row.nickName }}</span>
</template>
</el-table-column>
<el-table-column label="类型" align="center">
<template slot-scope="{ row }">
<span>{
{ row.nickName }}</span>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
1.data中的样式
tableData1: [
{ phone: "132344", nickName: "张三", id: "1" },
{ phone: "132344", nickName: "李四", id: "2" },
{ phone: "132344", nickName: "王五", id: "3" },
{ phone: "132344", nickName: "翠花", id: "4" },
{ phone: "132344", nickName: "小花", id: "5" },
{ phone: "132346", nickName: "佚名", id: "6" }
],
tableData2: [],
nowSelectData: [], // 左边选中列表数据
nowSelectRightData: [], // 右边选中列表数据
methods代码
// 左边全选事件
checkAll(row) {
this.nowSelectData = row;
},
// 右边全选事件
checkRightAll(row) {
this.nowSelectRightData = row;
},
// 左边选中事件
checkLeft(row) {
this.nowSelectData = row;
},
// 右边选中事件
checkRight(row) {
this.nowSelectRightData = row;
},
// 点击去右边
right() {
this.tableData2 = this.tableData2.concat(this.nowSelectData);
this.handleRemoveTabList(this.nowSelectData, this.tableData1);
// 按钮禁用
this.nowSelectData = [];
},
// 点击去左边
left() {
this.tableData1 = this.tableData1.concat(this.nowSelectRightData);
this.handleRemoveTabList(this.nowSelectRightData, this.tableData2);
// 按钮禁用
this.nowSelectRightData = [];
},
// 方法
handleRemoveTabList(isNeedArr, originalArr) {
if (isNeedArr.length && originalArr.length) {
for (let i = 0; i < isNeedArr.length; i++) {
for (let k = 0; k < originalArr.length; k++) {
// 注意,nickName为唯一值,如果不为唯一值那么会出错
if (isNeedArr[i]["nickName"] === originalArr[k]["nickName"]) {
console.log("-----------1111");
originalArr.splice(k, 1);
}
}
}
}
}
最后附上css样式
::v-deep .el-table-dialog {
border: 1px solid #e8e6e6;
thead {
// color: black;
th {
background-color: #f4f4f4;
.cell {
font-weight: bold;
}
}
th:last-child {
text-align: center;
}
}
}
这样就实现了穿梭框效果,文章到此结束希望对你有所帮助~