基础篇（二）：element ui中el-transfer（穿梭框）的使用-CSDN博客

本文介绍了一段Vue.js代码，展示了如何在el-transfer组件中实现左右两侧的分页功能。通过el-button和el-input元素，以及绑定的方法如handleChange、rightPageNumChange等，实现了对数据列表的分页操作，同时提供了绑定和解绑的逻辑处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下（嵌入了分页）：
在这里插入图片描述
html中：

     <el-transfer
        style="text-align: left; display: inline-block"
        v-model="value"
        filterable
        :titles="['已关联', '未关联']"
        :button-texts="['绑定', '解绑']"
        @change="handleChange"
        :data="data"
      >
        <!-- 右侧栏分页 -->
        <el-button
          type="text"
          style="color:#606266"
          v-if="value.length != 0"
          class="transfer-footer"
          slot="right-footer"
          size="small"
        >共{{ Rtotal }}条</el-button>
        <el-button
          v-if="value.length != 0"
          class="transfer-footer"
          slot="right-footer"
          size="small"
          @click="rightPageNumChange"
          :disabled="RPageNum - 1 < 1"
        >上一页</el-button>
        <el-input
          v-if="value.length != 0"
          v-model="RPageNum"
          size="mini"
          class="transfer-footer"
          slot="right-footer"
          :placeholder="RPageNum"
          style="width: 43px"
        ></el-input>
        <el-button
          class="transfer-footer"
          slot="right-footer"
          size="small"
          @click="rightAddPageNumChange"
          v-if="value.length != 0"
          :disabled="RPageNum > nextPage"
        >下一页</el-button>

        <!-- 左侧栏分页 -->
        <el-button
          type="text"
          style="color:#606266"
          v-if="leftLength != 0"
          class="transfer-footer"
          slot="left-footer"
          size="small"
        >共{{ Ltotal }}条</el-button>
        <el-button
          v-if="leftLength != 0"
          class="transfer-footer"
          slot="left-footer"
          size="small"
          @click="leftPageNumChange"
          :disabled="LPageNum - 1 < 1"
        >上一页</el-button>
        <el-input
          v-if="leftLength != 0"
          v-model="LPageNum"
          size="mini"
          class="transfer-footer"
          slot="left-footer"
          :placeholder="LPageNum"
          style="width: 43px"
        ></el-input>
        <el-button
          class="transfer-footer"
          slot="left-footer"
          size="small"
          @click="leftAddPageNumChange"
          v-if="leftLength != 0"
          :disabled="LPageNum > LNextPage"
        >下一页</el-button>

      </el-transfer>

script中：

<script>
import {
  listUsersByUser,
  listUsersNotInUser,
  distUser,
  removeDistUser
} from "@/api/user";
export default {
  data () {
    return {    
     // 穿梭框数据，这里注意，里面的属性名要和element里面的一样 不能自定义
      data: [{ key: 3, label: "你好", pinyin: "lalla" }, { key: 4, label: "很nice", pinyin: "aaa" }], //存放所有的数据，除了value的都是左侧的
      value: [3], //存放右侧菜单数据，里面的数值和data中的key值一致
      // 右侧分页数据
      Rtotal: "",
      RPageNum: "1",
      RPageSize: "20",
      nextPage: null,
      // 左侧分页数据
      Ltotal: "",
      LPageNum: "1",
      LPageSize: "20",
      LNextPage: null,
      leftLength: null
    };
    methods:{
		    // 穿梭框更改事件
    async handleChange (value, direction, keyArr) {
      let followsArr = []
      //value为左/右的所有数值，direction为方向left or right，keyArr为选中的key
      switch (direction) {
         //右到左 绑定
        case 'left':
          // 调用后端api绑定接口
          break
        //从左到右 解绑
        case 'right': 
          // 调用后端api解绑接口
          break
      }
    }
	}
  }
</script>