vue +iview（table）+element-ui 自己写的穿梭框

最新推荐文章于 2025-10-08 04:54:31 发布

原创

最新推荐文章于 2025-10-08 04:54:31 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中结合iview和element-ui，自定义实现一个穿梭框功能。主要内容包括布局设置、JS方法实现，如选择左边列表数据并将其添加到右边，同时删除左边对应的列表项。

一。布局

<template>
  <div class="settingparC">
    <div class="settingLeft">
      <Table ref="selection" @on-select="checkAll" height="390" border :columns="columns1" :data="data1"></Table>
    </div>
    <div class="settingContent">
      <div class="forward" @click="handelSelect">
        <Button :disabled="nowSelectData.length?false:true" :size="buttonSize" type="primary" >
            选中
          <Icon type="md-arrow-round-forward"/>
        </Button>
      </div>
      <div @click="handleRemoveSelect">
        <Button :disabled="nowSelectRightData.length?false:true" :size="buttonSize" type="primary">
          <Icon type="md-arrow-round-back"/>
          取消
        </Button>
      </div>
    </div>
    <div class="settingRight">
      <div style="padding-top:10px;">
       啦啦啦：
        <el-select style="width