Element ui 穿梭框（1）改造之--分页封装组件

目录

1.效果图： 

2.注意： 

3.引用组件： 

4.组件原码：

---

el-transfer 穿梭框左侧数据太多数据比较多时，不能进行分页，决定自己封装一个！

1.效果图： 

2.注意： 

组件中：
2.1 可通过  父组件传值（titles）修改穿梭框左边和右边的标题，形式为数组[],左侧为第一个值，右侧为第二个值；

2.2 import { listUser } from "@/api/system/user"; 为接口地址；
2.3 transfer-page.vue 的data 中

        defaultProps: {

                label: "nickName",

                id: "userId",

              },

可根据接口数据修改穿梭框中对应的label和id的属性；

---

3.引用组件： 

 <el-dialog
      :title="'title'"
      :visible.sync="isTransfer"
      width="800px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="wsio_name">
          <transfer-page></transfer-page>
        </el-form-item>
      </el-form>
    </el-dialog>

4.组件原码： 组件名为（transfer-page.vue)

<template>
  <div class="transfer">
    <div class="leftTransfer">
      <div class="leftTransfer_title">
        <el-checkbox
          :indeterminate="left.isIndeterminate"
          v-model="left.checkAll"
          @change="leftHandleCheckAllChange"
          >{
  { titles[0] }}</el-checkbox
        >
        <span
          >{
  { left.transferDataChecked.length }}/{
  {
            left.transferData.length
          }}</span
        >
      </div>