使用ElementUI的table组件实现类似穿梭框的效果

先来看下效果：

实现步骤：
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 //当选择项发生变化时会触发该事件

2. 声明变量

leftlists: [], //左边表格数据
rightlists: [], //右边所选择的表格数据

3.选择方法

//选择值变化
    selectionChange(val) {
      // val是传过来当前所有选中列表值，但是已经存在的我们就不需要添加了，所以要判断当前已选择的列表长度
      for (var i = 0; i < val.length; i++) {
        if (JSON.stringify(this.rightlists).indexOf(JSON.stringify(val[i])) == -1) {
          this.rightlists.push({
            id: val[i].id,
            name: val[i].name,
            content: val[i].content,
          });
        }
      }
    },

4.总结，代码很简单，主要是思路要清晰