el-table实现穿梭功能

 第一种

<template><el-row :gutter="20"><el-col :span="10"><!-- 搜索 --><div class="search-bg"><YcSearchInput title="手机号" v-model="search.phone" /><div class="search-submit"><el-button type="primary" @click="getTableList(1)" class="m-r-10">查询</el-button><el-button @click="clearSearch()">重置</el-button></div></div><!-- 穿梭框左边 --><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 type="index" label="序号" min-width="160" /><el-table-column prop="phone" label="手机号" min-width="160" /><el-table-column prop="nickName" label="姓名" min-width="160" /><el-table-column prop="id" label="样本ID" min-width="160" /></el-table><!-- 翻页 --><el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="search.page.current" :page-sizes="$store.state.pageSizes" :page-size="search.page.size" :layout="$store.state.layout" :total="tableTotal" /></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"><!-- 搜索 --><div class="search-bg"><YcSearchInput title="手机号" v-model="phoneRight" /><div class="search-submit"><el-button type="primary" @click="searchBtn()" class="m-r-10">查询</el-button><el-button @click="resetBtn()">重置</el-button></div></div><!-- 穿梭框右边 --><el-table ref="multipleTable" :data="tableData2" 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="序号" min-width="160" /><el-table-column prop="phone" label="手机号" min-width="160" /><el-table-column prop="nickName" label="姓名" min-width="160" /><el-table-column prop="id" label="样本ID" min-width="160" /></el-table></el-col></el-row>
</template><script>
export default {data () {return {search: {phone: '',page: {current: 1,size: 10}},tableTotal: 0,tableData1: [],tableData2: [],nowSelectData: [], // 左边选中列表数据nowSelectRightData: [], // 右边选中列表数据phoneRight: ''}},mounted () {this.getTableList()},methods: {// 获取左侧数据getTableList () {this.tableData1 = [{ phone: "111", nickName: "张三", id: "1" },{ phone: "222", nickName: "李四", id: "2" },{ phone: "333", nickName: "王五", id: "3" },{ phone: "444", nickName: "翠花", id: "4" },{ phone: "555", nickName: "小花", id: "5" },{ phone: "666", nickName: "佚名", id: "6" }]},// 右边查询searchBtn () {const tableData2 = JSON.parse(localStorage.getItem('tableData2'))if (this.phoneRight === '' || !this.phoneRight) {this.tableData2 = tableData2} else {this.tableData2 = tableData2.filter(item => item.id.indexOf(this.phoneRight) > -1)}},// 右边重置resetBtn () {this.phoneRight = ''this.tableData2 = JSON.parse(localStorage.getItem('tableData2'))},// 重置clearSearch () {this.search = {phone:'',page: {current: 1,size: 10}}this.getTableList()},/*** 分页*/handleSizeChange (val) {this.search.page.current = 1this.search.page.size = valthis.getTableList()},handleCurrentChange (val) {this.search.page.current = valthis.getTableList()},// 左边全选事件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 = [];localStorage.setItem('tableData2', JSON.stringify(this.tableData2))},// 点击去左边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);}}}}}}
}
</script><style lang="less" scoped>
::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;}}
}
.search-bg {margin: 0 !important;
}
</style>

第二种，只是纯表单穿梭，没有其他功能

<template><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>
</template><script>
export default {data () {return {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);}}}}}}
}
</script><style lang="less" scoped>
::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;}}
}
</style>