使用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 //当选择项发生变化时会触发该事件

  1. 声明变量
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.总结,代码很简单,主要是思路要清晰

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值