先来看下效果:
实现步骤:
1.使用官网给的table创建左右两个表格
<!-- 表格展示 -->
<div class="table-box">
<div class="table-container">
<el-table ref="leftTab" :data="leftlists" @selection-change="selectionChange">
<el-table-column
type="selection"
:reserve-selection="true"
disabled="true"
width="40"
></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="content" label="内容"></el-table-column>
</el-table>
</div>
<div class="table-container">
<el-table ref="rightTab" :data="rightlists">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="content" label="内容"></el-table-column>
</el-table>
</div>
</div>
注意:
el-table标签里需要包含 @selection-change //当选择项发生变化时会触发该事件
- 声明变量
leftlists: [], //左边表格数据
rightlists: [], //右边所选择的表格数据
3.选择方法
//选择值变化
selectionChange(val) {
this.rightlists=[];
// val是传过来当前所有选中列表值,但是已经存在的我们就不需要添加了,所以要判断当前已选择的列表长度
for (var i = 0; i < val.length; i++) {
this.rightlists.push({
id: val[i].id,
name: val[i].name,
content: val[i].content,
}
},
4.总结,代码很简单,主要是思路要清晰