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

最新推荐文章于 2023-02-21 10:53:00 发布

爱养猫的木子

最新推荐文章于 2023-02-21 10:53:00 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/Quiet_123/article/details/84326438

版权

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

摘要由CSDN通过智能技术生成

一。布局

<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