div+elementUI实现穿梭框

element-ui自带的穿梭框两边都是列表的格式，想要更多样式就自己造吧~

思想是：点击“添加”数据从左边列表删除，插入到右边列表中，由于没有添加后台，刷新之后数据就恢复了，实际使用的时候得访问后台接口才行~

完整代码在最后面。

效果图：左边是一排按钮组成的列表，也可以用ul li实现，右边是el-table表格。

1.布局：添加对话框，将对话框的body从左到右分成三部分

<el-dialog title="XXXX" :visible.sync="reportDlgVisible" :close-on-click-modal="false" class="report-config-dialog">
      <div class="dialog-body">
        <div class="dialog-left"></div>
        <div class="dialog-middle"></div>
        <div class="dialog-right"></div>
      </div>
      <div slot="footer">
        <el-button>取消</el-button>
        <el-button>确定</el-button>
      </div>
    </el-dialog>

2.添加组件：

左边列表：

<div class="dialog-left">
   <div class="report-list-div">
      <el-button v-for="(item, key) in leftList" :key="key" type="text" class="report-list" :class="reportBtnActive === item ? 'active' : 'normal'" @click="reportChoose(item)">{
  { item.label }}</el-button>
   </div>
</div>
        

中间按钮（主要靠样式）：

<div class="dialog-middle">
   <div class="dialog-middle-button">
      <el-button type="primary" plain class="report-add" @click="reportAddDlg">添加</el-button>
      <el-button type="primary" plain class="report-delete" @click="reportDelete">删除</el-button>
   </div>
</div>

 右边表格：