Element穿梭框+分页+滑块

效果

先去element把对应组件放到一个组件中设置好布局

穿梭框绑定数据源（后台数据默认给的第一页的值）

分页通过掉后台接口给的总数据自动会计算分多少页，每次通过分页里点击传当前页数给后台拿值

滑块通过watch监听滑块装填变化切换值

<el-dialog  title="A2L文件列表" :visible.sync="dialogTableVisible">
    <div style="display: flex;flex-direction: column;justify-items: center;">
          <div style="margin: 0 auto;">
            <el-switch
                    v-model="value1"
                    active-text="值1"
                    inactive-text="值2">
            </el-switch>
            <el-input
                    style="width: 35vh;margin-left: 23vh;"
                    placeholder="输入搜索内容点击回车按钮触发"
                    @keyup.enter.native="Lok"
                    v-model="state"
                    clearable>
            </el-input>
            <el-button icon="el-icon-search" circle @click="Lok"></el-button>
          </div>
          <br>
          <el-transfer style="margin: 0 auto;" :width="600" v-model="value2" :data="detail" :titles="['数据源', '当前页已选定值']">
            <el-button class="transfer-footer" slot="right-footer" size="small" @click="pushToOborOC()">确定</el-button>
          </el-transfer>
          <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="100"
                  :pager-count="5"
                  layout="total, prev, pager, next, jumper"
                  :total="allA2LFileLength">
          </el-pagination>
      </div>
</el-dialog>

样式写在标签里面真是因为我菜，前端小白真是靠夯代码实现功能

export default {
  data() {
    return {
      // 值2列表集合
      Ob: [],
      // 值1列表集合
      Oc: [],
      allA2LFileLength: 1,
      // 每次保存的ID值
      ID: '',
      currentPage: 1,
      // state是搜索值
      state: '',
      // value1 false是值1 true是值2
      value1: false,
      // value2 文件列表中的选中列表值
      value2: [],
      // detail 穿梭框数据列表
      detail: [{
        key: 'sinal1',
      },
      {
        key: 'sinal2',
      }],
        // 控制分页是否显示
      dialogFormVisible: false,
},
watch: {
// 监听滑块变化，如果有变化重新给穿梭框列表赋值
    value1: {
      handler(newItem) {
        this.dialogTableVisibleshow();
      },
      immediate: true,
      deep: true,
    },
methods: {
    Lok() {
        // 这里写查询接口逻辑写自己接口
      window.alert('接口暂未开放!');
    },
         // 点击分页逻辑请求
    handleCurrentChange(curpage) {
      const type = this.value1 ? 2 : 1;
      deviceAPI.getAllA2l(this.ID, curpage, type).then(
        (res) => {
          // 返回所有数据
          this.detail = res.data;
        },
      ).catch();
    },
    dialogTableVisibleshow(ID) {
      console.log('当前面板ID', this.$route.params.id);
      // 判断是否有ID
      if (ID) {
        this.ID = ID;
      } else {
        ID = this.ID;
      }
      const PageID = this.currentPage;
      const singalName = this.value1;
      const type = this.value1 ? 2 : 1;
         // 这里写自己请求后台数据接口
      deviceAPI.getAllFILE(ID, PageID, type).then(
        (res) => {
          this.value2 = [];
          this.dialogTableVisible = true;
          // 返回所有数据
          this.detail = res.data;
          if (this.value1) {
            this.Ob = res.savedData;
          } else {
            this.Oc = res.savedData;
          }
          // 接受分页数据长度每页100条，用总长度自动分页
          this.allA2LFileLength = res.totalConn;
        },
      ).catch((res) => { console.log('文件请求失败'); });
    },

再理下逻辑，点击某个按钮触发页面同时请求后台的接口，后台接口反上来值赋值给穿梭框，每次分页点击下一页或者下几页传请求对应页的值给后台，后台再返回值给前端，切换滑块再次请求后台改变值。