基础篇(二):element ui中el-transfer(穿梭框)的使用

本文介绍了一段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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值