Vue 实现高级穿梭框 Transfer 封装

小晗同学2024-09-20 18:50

文章目录

01 基础信息

1.1. 技术栈

Element-UI、Vue2、lodash

1.2. 组件设计

需求描述：

  1. 【待选择列表】 接收业务的表格数据，支持选择多项并将其添加到【已添加列表】 （勾选或删除操作，两边的列表是同步的）；
  2. 【已添加列表】支持本地分页和本地简易搜索功能（已添加的列表数据需要实时同步给业务）；

a. 竖版设计稿

b. 横版设计稿

02 技术方案

（1）初定义数据

javascript 复制代码 
// 【待选择列表】外部传输源数据
// 【已添加列表】组件内部控制数据的分页、搜索和展示

const props = {
    sourceList: [], // 源数据
    columnList: [], // 表格列配置（注：字段类型均为字符串）
    searchList: [], // 【已添加列表】搜索项（注：与表头对应）
    refreshTableData: (param)=>{}, // 回调函数
    total: 0, // 用于控制分页器
}

const state = {
    targetList: [], // 目标数据
    searchList: [], // 【已添加列表】搜索项
}

（2）注意事项

  1. 【待选择列表】翻页选择时需要记录并回显已选择的行
  2. 【已添加列表】删除后需要继续留在当前页，即要判断删除的是否是最后一页中只有一条的数据
  3. 【待选择列表】更改选择后，【已添加列表】的筛选项或是状态项是否重置？或是维持不变？

（3）逻辑草图

03 代码示例

3.1. 组件使用

外部可通过 ref 调用的方法：

  1. clearSelection()：清空所有选择项；
  2. setPaginationParam({pageNum,pageSize},isFetch)：设置源表格分页器参数，若 isFetch 为 true 则会自动调用 fetchSourceList （ isFetch 默认为 false ）；
  3. initializeComponent(isFetch)：初始化组件，若 isFetch 为 true 则初始化后自动请求源表格数据（ isFetch 默认为 false ）；
  4. this.$refs['transferPlus'].selectList：若要初始化 selectList 可以使用 ref 设置（记得外面包裹 this.$nextTick）；

注意事项：

  1. 使用插槽自定义表格列时，是同时应用到两个列表中的；
  2. 组件会通过 selectionChange 事件告知您选择的列表结果；
  3. 特别地，组件一开始不会默认请求源表格数据，所以您需要在使用前自行调用 fetchSourceList 获取 sourceList 等来渲染组件的数据，组件只会在内部的分页状态等有更改的情况下自动调用 fetchSourceList 为您刷新渲染数据；
  4. 若 usePagination 为 true ，则组件自动为您控制分页器，但您必须设置好变量（sourceTotal）和源表格数据请求方法（fetchSourceList），并且为了防止您初始请求的分页参数和组件内部定义的默认初始分页参数不同，您可以设置 initSourcePageNum 和 initSourcePageSize 来同步内外初始化参数；
javascript 复制代码 
<template>  
  <TransferPlus 
    ref="transferPlusRef"
    :sourceList="sourceList" 
    :tableColumnList="tableColumnList" 
    usePagination 
    tableHeight="240" 
    :sourceTotal="sourceTotal" 
    :tableLoading="tableLoading" 
    @fetchSourceList="fetchSourceList" 
  >
    <!-- "table_"后拼接的是你定义该列的prop -->
    <template #table_tag="{ row, rowIndex }">{{ rowIndex + 1 }}{{row.tag}}</template>
    <!-- 自定义源表格的搜索区域 -->
    <template #source_search>
      <el-input placeholder="请输入课程名称" v-model="queryInfo.title" class="search-input" clearable>
        <el-button slot="append" icon="el-icon-search" @click="searchSourceList"></el-button>
      </el-input>
    </template>
  </TransferPlus>
</template>

<script>
  import TransferPlus from '@/components/TransferPlus'
  
  export default {
    components: { TransferPlus },
    data() {
      sourceList: [],    
      tableColumnList: [
        { label: '课程id', prop: 'id' },
        { label: '课程名称', prop: 'title' },
        { label: '课程类型', prop: 'tag' },
      ],
      tableLoading: false,
      sourceTotal: 0,
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        title: '',
        tag: '',
      },
    }
    method:{
      async fetchSourceList (params={pageNum,pageSize}) {
        this.tableLoading = true
        const { pageNum, pageSize } = this.queryInfo
        this.queryInfo = {
          ...this.queryInfo,
          pageNum: params?.pageNum || pageNum,
          pageSize: params?.pageSize || pageSize,
        }
        const res = await getList(this.queryInfo)
        this.sourceList = res.data.list || []
        this.sourceTotal = res.data.total || 0
        this.tableLoading = false
      },
      searchSourceList() {
        // 每次查询时只需要重置穿梭框的页码到 1，并配置自动调用搜索函数
        this.$refs['transferPlusRef'].setPaginationParam({ pageNum: 1 }, true)
      },
    }
  }
 </script>
 
 <style scoped>
   .search-input {
      margin-bottom: 12px;
      width: 100%;
      height: 32px;
  }
 </style>

实现效果图：

3.2. 组件源码

./TransferPlus/index.vue

javascript 复制代码 
<!--  
组件使用方式如下：
  <TransferPlus :sourceList="sourceList" :tableColumnList="tableColumnList" usePagination tableHeight="240" :sourceTotal="sourceTotal" :tableLoading="tableLoading" @fetchSourceList="fetchSourceList" >
    <template #table_你定义该列的prop="{ columnProps }">{{ columnProps.$index + 1 }}{{columnProps.row.xxx}}</template>
  </TransferPlus>
  method:{
    async fetchSourceList (params={pageNum,pageSize}) {
      this.tableLoading = true
      const res = await getList({ ...this.queryInfo, ...params })
      this.sourceList = res.data.list
      this.sourceTotal = res.data.total
      this.tableLoading = false
    }
  }
外部可通过 ref 调用的方法：
1. clearSelection()：清空所有选择项；
2. setPaginationParam({pageNum,pageSize},isFetch)：设置源表格分页器参数，若 isFetch 为 true 则会自动调用 fetchSourceList（ isFetch 默认为 false ）；
3. initializeComponent(isFetch)：初始化组件，若 isFetch 为 true 则初始化后自动请求源表格数据（ isFetch 默认为 false ）；
4. this.$refs['transferPlusRef'].selectList：若要初始化 selectList 可以使用 ref 设置（记得外面包裹 this.$nextTick）；
注意事项：
1. 使用插槽自定义表格列时，是同时应用到两个列表中的；
2. 组件会通过 selectionChange 事件告知您选择的列表结果；
3. 特别地，组件一开始不会默认请求源表格数据，所以您需要在使用前自行调用 fetchSourceList 获取 sourceList 等来渲染组件的数据，组件只会在内部的分页状态等有更改的情况下自动调用 fetchSourceList 为您刷新渲染数据；
4. 若 usePagination 为 true，则组件自动为您控制分页器，但您必须设置好变量（sourceTotal）和源表格数据请求方法（fetchSourceList），并且为了防止您初始请求的分页参数和组件内部定义的默认初始分页参数不同，您可以设置 initSourcePageNum 和 initSourcePageSize 来同步内外初始化参数；
 -->
<template>
  <div :class="direction === 'horizontal' ? 'transfer-horizontal' : ''">
    <!-- 【待选择列表】 -->
    <div :class="['list-wrapping', { horizontal: direction === 'horizontal' }]">
      <div class="wrapping-header">
        <span>待选择列表</span>
        <span>{{ selectLength }}/{{ sourceTotal || sourceList.length }}</span>
      </div>
      <div class="wrapping-content">
        <!-- 自定义搜索 -->
        <slot name="source_search" />
        <TransferTable
          ref="sourceTransferTableRef"
          v-model="selectList"
          :tableList="sourceList"
          :tableColumnList="tableColumnList"
          :tableHeight="tableHeight"
          :total="sourceTotal"
          :initPageNum="initSourcePageNum"
          :initPageSize="initSourcePageSize"
          :usePagination="usePagination"
          :tableLoading="tableLoading"
          :uniqueKey="uniqueKey"
          :selectable="selectable"
          :pagerCount="pagerCount"
          @fetchTableList="handleFetchTableList"
        >
          <!-- 使用穿梭表格的自定义列插槽 -->
          <template v-for="(item, index) in tableColumnList" :slot="`inner_table_${item.prop}`" slot-scope="slotData">
            <span :key="index">
              <!-- 设置新的插槽提供给消费端自定义列 -->
              <slot :name="`table_${item.prop}`" :columnProps="slotData.columnProps" :row="slotData.columnProps.row" :rowIndex="slotData.columnProps.$index">
                {{ slotData.columnProps.row[item.prop] || '-' }}
              </slot>
            </span>
          </template>
        </TransferTable>
      </div>
    </div>
    <!-- 【已添加列表】 -->
    <div :class="['list-wrapping', { horizontal: direction === 'horizontal' }]">
      <div class="wrapping-header">
        <span>已添加列表</span>
        <span>{{ selectLength }}</span>
      </div>
      <div class="wrapping-content">
        <template v-if="selectLength">
          <el-input placeholder="请输入内容" v-model="searchStr" class="search-input" clearable>
            <el-select slot="prepend" v-model="searchKey" placeholder="请选择" class="search-select" @change="handleSearchKeyChange" value-key="prop">
              <el-option v-for="item in targetSearchList" :key="item.prop" :label="item.label" :value="item.prop"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="handleSearchStrChange"></el-button>
          </el-input>
          <TransferTable
            ref="targetTransferTableRef"
            :tableList="targetList"
            :tableColumnList="tableColumnList"
            :tableHeight="tableHeight"
            tableType="target"
            :uniqueKey="uniqueKey"
            :total="targetTotal"
            :usePagination="usePagination"
            :pagerCount="pagerCount"
            @removeSelectRow="handleRemoveSelectRow"
            @fetchTableList="getTargetTableList"
          >
            <!-- 使用穿梭表格的自定义列插槽 -->
            <template v-for="(item, index) in tableColumnList" :slot="`inner_table_${item.prop}`" slot-scope="slotData">
              <span :key="index">
                <!-- 设置新的插槽提供给消费端自定义列 -->
                <slot :name="`table_${item.prop}`" :columnProps="slotData.columnProps" :row="slotData.columnProps.row" :rowIndex="slotData.columnProps.$index">
                  {{ slotData.columnProps.row[item.prop] || '-' }}
                </slot>
              </span>
            </template>
          </TransferTable>
        </template>
        <div class="empty-box" v-else>
          <el-image class="empty-image" :src="require('@/assets/empty_images/data_empty.png')" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import TransferTable from './TransferTable.vue'
  import { throttle, differenceBy, filter, isNil, noop } from 'lodash'
  export default {
    components: { TransferTable },
    props: {
      // 源数据
      sourceList: {
        type: Array,
        default: () => [],
      },
      // 表格列配置列表
      tableColumnList: {
        type: Array,
        default: () => [], // {label,prop,align}[]
      },
      // 表格数据是否加载中
      tableLoading: {
        type: Boolean,
        default: false,
      },
      // 表格高度
      tableHeight: {
        type: String | Number,
        default: 240,
      },
      // 【已添加列表】搜索项（注：与表格列配置对应，且仅能搜索字段类型为 String）
      searchList: {
        type: Array,
        default: () => [], // {label,prop}[]
      },
      // 源表格总数据的条数
      sourceTotal: {
        type: Number,
        default: 0,
      },
      // 源表格初始 pageNum（用于同步消费端初始化请求时的分页参数，进而帮助控制分页器）
      initSourcePageNum: {
        type: Number,
        default: 1,
      },
      // 源表格初始 pageSize（用于同步消费端初始化请求时的分页参数，进而帮助控制分页器）
      initSourcePageSize: {
        type: Number,
        default: 10,
      },
      // 使用分页器
      usePagination: {
        type: Boolean,
        default: false,
      },
      // 唯一标识符（便于定位到某条数据进行添加和移除操作）
      uniqueKey: {
        type: String,
        default: 'id',
      },
      // 穿梭框展示方式
      direction: {
        type: String,
        default: 'vertical', // horizontal 左右布局, vertical 上下布局
      },
      selectable: {
        type: Function,
        default: noop(),
      },
      // 页码按钮的数量，当总页数超过该值时会折叠（element规定：大于等于 5 且小于等于 21 的奇数）
      pagerCount: {
        type: Number,
        default: 7,
      },
    },
    data() {
      return {
        selectList: [], // 已选择的列表
        targetList: [], // 已添加列表的回显数据
        searchKey: '',
        searchStr: '',
        targetPageNum: 1,
        targetPageSize: 10,
        targetTotal: 10,
      }
    },
    computed: {
      targetSearchList() {
        return this.searchList.length ? this.searchList : this.tableColumnList
      },
      selectLength() {
        return this.selectList?.length || 0
      },
    },
    watch: {
      selectList(newVal) {
        this.getTargetTableList()
        this.$emit('selectionChange', newVal)
      },
    },
    mounted() {
      this.searchKey = this.targetSearchList[0].prop
      this.targetPageNum = 1
      this.targetPageSize = 10
    },
    methods: {
      handleFetchTableList(params) {
        this.$emit('fetchSourceList', params)
      },
      handleRemoveSelectRow(rowItem) {
        this.selectList = differenceBy(this.selectList, [rowItem], this.uniqueKey)
      },
      handleSearchStrChange() {
        // 每次查询时只需要重置穿梭框的页码到 1，并配置自动调用搜索函数
        this.$refs['targetTransferTableRef'].setPaginationParam({ pageNum: 1 }, true)
      },
      handleSearchKeyChange() {
        // 更新搜索 Key 之后，需要清空搜索字符串
        this.searchStr = ''
        this.$refs['targetTransferTableRef'].setPaginationParam({ pageNum: 1 }, true)
      },
      getTargetTableList(params = null) {
        const targetTableList = filter(this.selectList, (item) => {
          if (this.searchStr) {
            const itemValueToString = isNil(item[this.searchKey]) ? '' : JSON.stringify(item[this.searchKey])
            return itemValueToString.includes(this.searchStr)
          } else {
            return true
          }
        })
        this.targetTotal = targetTableList.length
        if (params) {
          this.targetPageNum = params.pageNum
          this.targetPageSize = params.pageSize
        }
        // 前端分页
        const startIndex = (this.targetPageNum - 1) * this.targetPageSize
        const endIndex = this.targetPageNum * this.targetPageSize
        this.targetList = targetTableList.slice(startIndex, endIndex)
      },
      clearSelection() {
        // 清空所有选择项（用于消费端设置的 ref 调用）
        this.selectList = []
        this.targetPageNum = 1
        this.targetPageSize = 10
        this.searchKey = this.targetSearchList[0].prop
      },
      setPaginationParam({ pageNum, pageSize }, isFetch) {
        // 设置源表格分页器参数（用于消费端设置的 ref 调用）
        //  若 isFetch 为 true，则自动调用消费端传进来的回调搜索方法
        this.$refs['sourceTransferTableRef'].setPaginationParam({ pageNum, pageSize }, isFetch)
      },
      initializeComponent(isFetch) {
        // 初始化组件（用于消费端设置的 ref 调用）
        //  若 isFetch 为 true，则自动调用消费端传进来的回调搜索方法
        this.clearSelection()
        this.setPaginationParam({ pageNum: this.initSourcePageNum || 1, pageSize: this.initSourcePageSize || 10 }, isFetch)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .transfer-horizontal {
    display: flex;
  }

  .list-wrapping {
    margin-bottom: 12px;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    background: #fff;
    overflow: hidden;
  }

  .horizontal {
    flex: 1;
    margin-right: 20px;
    margin-bottom: 0px;
    &:last-child {
      margin: 0px;
    }
  }

  .wrapping-header {
    width: 100%;
    padding: 10px 20px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;
    background: #f5f5f5;
    color: #333;
    font-size: 14px;
    line-height: 20px;
  }

  .wrapping-content {
    padding: 12px;
    width: 100%;
  }

  .search-input {
    margin-bottom: 12px;
    max-width: 500px;
    height: 32px;
  }

  .search-select {
    width: 120px;
  }

  .empty-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 40px 0px;
  }

  .empty-image {
    width: 150px;
    height: 150px;
  }

  :deep(.search-input .el-input-group__prepend) {
    background-color: #fff;
  }

  :deep(.el-select .el-input .el-select__caret) {
    color: #3564ff;
  }
</style>

./TransferPlus/TransferTable.vue

javascript 复制代码 
<template>
  <div>
    <!-- 表格区域 -->
    <el-table
      ref="transferTable"
      v-loading="tableLoading"
      :border="true"
      :data="tableList"
      size="mini"
      :stripe="true"
      :height="tableHeight || 'auto'"
      :row-class-name="getTableRowClassName"
      :header-cell-style="{
        background: '#F1F1F1',
      }"
      @select="handleSelect"
      @select-all="handleSelectAll"
    >
      <el-table-column type="index" align="center"></el-table-column>
      <el-table-column type="selection" width="50" v-if="tableType === 'source'" :selectable="selectable"></el-table-column>
      <el-table-column v-for="(item, index) in tableColumnList" :key="item.prop || index" :label="item.label" :prop="item.prop" :align="item.align || 'left'" :width="item.width || 'auto'" show-overflow-tooltip>
        <template #default="columnProps">
          <slot :name="`inner_table_${item.prop}`" :columnProps="columnProps">
            <span>{{ columnProps.row[item.prop] }}</span>
          </slot>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="70" align="center" v-if="tableType === 'target'">
        <template slot-scope="scope">
          <el-button @click="handleRemoveRowItem(scope.row, scope.$index)" type="text" icon="el-icon-delete" size="medium"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器区域 -->
    <div v-if="usePagination" class="pagination-box">
      <!-- 实现两侧分布的分页器布局：使用两个分页器组件 + 不同 layout 组成 -->
      <el-pagination background :current-page="pageNum" :layout="layoutLeft" :page-size="pageSize" :pager-count="pagerCount" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      <el-pagination background :current-page="pageNum" :layout="layoutRight" :page-size="pageSize" :pager-count="pagerCount" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </div>
  </div>
</template>

<script>
  import { differenceBy, uniqBy, noop } from 'lodash'

  export default {
    props: {
      // 已勾选的数组
      value: {
        type: Array,
        default: () => [],
        require: true,
      },
      // 表格数据
      tableList: {
        type: Array,
        default: () => [],
      },
      // 表格列配置列表
      tableColumnList: {
        type: Array,
        default: () => [], // {label,prop,align}[]
      },
      // 表格数据是否加载中
      tableLoading: {
        type: Boolean,
        default: false,
      },
      // 表格高度
      tableHeight: {
        type: String | Number,
        default: 240,
      },
      // 表格数据类型
      tableType: {
        type: String,
        default: 'source', // source 源列表，target 目标列表
      },
      // 【已添加列表】搜索项（注：与表格列配置对应，且仅能字段类型为 String）
      searchList: {
        type: Array,
        default: () => [], // {label,prop,align}[]
      },
      // 分页后表格总数据的条数
      total: {
        type: Number,
        default: 0,
      },
      // 初始 pageNum
      initPageNum: {
        type: Number,
        default: 1,
      },
      // 初始 pageSize
      initPageSize: {
        type: Number,
        default: 10,
      },
      // 使用分页器
      usePagination: {
        type: Boolean,
        default: false,
      },
      // 唯一标识符（便于定位到某条数据进行添加和移除操作）
      uniqueKey: {
        type: String,
        default: 'id',
      },
      // Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
      selectable: {
        type: Function,
        default: noop(),
      },
      // 页码按钮的数量，当总页数超过该值时会折叠（element规定：大于等于 5 且小于等于 21 的奇数）
      pagerCount: {
        type: Number,
        default: 7,
      },
    },
    data() {
      return {
        layoutLeft: 'total',
        layoutRight: 'sizes, prev, pager, next',
        pageNum: 1,
        pageSize: 10,
        preSelectList: [], // 上一次选择的数据（点击分页器就清空）
        stashSelectList: [], // 暂存数据，便于点击页码后，还能保存前一页的数据
        isNeedToggle: true, // 是否需要勾选该页已选择项（用于换页后的回显选择项）
        isTableChangeData: false, // 是否是当前表格造成选择项的变化（用于同步【待选择列表】的勾选项）
      }
    },
    computed: {
      currentPageSelectList() {
        const currentSelectList = []
        this.stashSelectList?.forEach((item) => {
          const currentRow = this.tableList?.find((row) => row[this.uniqueKey] === item[this.uniqueKey])
          if (currentRow) {
            currentSelectList.push(currentRow)
          }
        })
        return currentSelectList
      },
    },
    watch: {
      value(newVal) {
        this.stashSelectList = newVal || []
        // 只有在其他地方修改了选择表格数据后，才刷新覆盖勾选项（当前表格修改选择项是双向绑定的，所以不需要刷新覆盖勾选项），实现精准回显和两表格的联动
        if (!this.isTableChangeData) {
          this.handleToggleSelection()
        }
        // 当暂存的选择列表为空时，需要同步更新 preSelect 为空数组，以便下次选择时进行判断是增加选择项还是减少选择项
        if (!this.stashSelectList.length) {
          this.preSelectList = []
        }
        this.isTableChangeData = false
      },
      tableList() {
        if (this.isNeedToggle) {
          this.preSelectList = this.currentPageSelectList
          this.handleToggleSelection()
          this.isNeedToggle = false
        }
      },
    },
    mounted() {
      this.pageNum = this.initPageNum || 1
      this.pageSize = this.initPageSize || 110
      // 解决右侧固定操作栏错位问题
      this.$nextTick(() => {
        this.$refs.transferTable.doLayout()
      })
      this.$emit('selectionChange', [])
    },
    methods: {
      getTableRowClassName({ rowIndex }) {
        if (rowIndex % 2 == 0) {
          return ''
        } else {
          return 'stripe-row'
        }
      },
      fetchTableList(pageNum = 1) {
        if (this.usePagination) {
          // 若不是页码更改触发，则默认将 pageNum 重置为 1
          this.pageNum = pageNum
          const params = {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          }
          this.$emit('fetchTableList', params)
        } else {
          this.$emit('fetchTableList')
        }
      },
      setPaginationParam({ pageNum, pageSize }, isFetch = false) {
        // 设置分页器参数（用于消费端设置的 ref 调用）
        this.pageNum = pageNum || this.pageNum
        this.pageSize = pageSize || this.pageSize
        this.isNeedToggle = true
        if (isFetch) {
          this.fetchTableList()
        }
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.isNeedToggle = true
        this.fetchTableList()
      },
      handleCurrentChange(val) {
        this.isNeedToggle = true
        this.fetchTableList(val)
      },
      handleStashSelectList(isAdd = true, list = []) {
        if (isAdd) {
          // 暂存数组中增加，并兜底去重
          this.stashSelectList = uniqBy([...this.stashSelectList, ...list], this.uniqueKey)
        } else {
          // 暂存数组中移除
          this.stashSelectList = differenceBy(this.stashSelectList, list, this.uniqueKey)
        }
        this.isTableChangeData = true
        this.$emit('input', this.stashSelectList)
        this.$emit('selectionChange', this.stashSelectList)
      },
      handleSelect(selectList, row) {
        // 判断是否是增加选择项
        const isAddRow = this.preSelectList.length < selectList.length
        this.handleStashSelectList(isAddRow, [row])
        // 更新当前页记录的上次数据
        this.preSelectList = [...selectList]
      },
      handleSelectAll(selectList) {
        // 判断是否是全选（需要考虑两个数组长度相等的情况）
        const isAddAll = this.preSelectList.length <= selectList.length
        // 更新当前页记录的上次数据
        this.handleStashSelectList(isAddAll, isAddAll ? selectList : this.preSelectList)
        this.preSelectList = [...selectList]
      },
      handleRemoveRowItem(rowItem, rowIndex) {
        const remainderPage = this.total % this.pageSize ? 1 : 0
        const pageNumTotal = parseInt(this.total / this.pageSize) + remainderPage
        const isLastPageOnlyOne = rowIndex === 0 && this.pageNum === pageNumTotal
        // 判断删除的是否是最后一页中只有一条的数据
        if (isLastPageOnlyOne && this.pageNum > 1) {
          // 若是，则 pageNum 需要往前调整一页，因为删除后最后一页不存在
          this.handleCurrentChange(this.pageNum - 1)
        }
        this.$emit('removeSelectRow', rowItem)
      },
      handleToggleSelection() {
        this.$nextTick(() => {
          // 先清除所有勾选状态
          this.$refs.transferTable.clearSelection()
          if (this.currentPageSelectList.length) {
            // 再依次勾选当前页存在的行
            this.currentPageSelectList.forEach((item) => {
              this.$refs.transferTable.toggleRowSelection(item, true)
            })
          }
        })
      },
    },
  }
</script>

<style scoped>
  /* 表格斑马自定义颜色 */
  :deep(.el-table__row.stripe-row) {
    background: #f9f9f9;
  }

  /* 表格操作栏按钮取消间距 */
  :deep(.el-button) {
    padding: 0px;
  }

  /* 表格操作栏按钮固定大小 */
  :deep(.el-icon-delete::before) {
    font-size: 14px !important;
  }

  .pagination-box {
    display: flex;
    justify-content: space-between;
  }
</style>
相关推荐
天下无贼！1 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
Jiaberrr1 小时前
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)
前端·javascript·tree·树形·过滤筛选
我码玄黄2 小时前
THREE.js：网页上的3D世界构建者
开发语言·javascript·3d
爱喝水的小鼠2 小时前
Vue3(一) Vite创建Vue3工程，选项式API与组合式API；setup的使用；Vue中的响应式ref，reactive
前端·javascript·vue.js
WeiShuai2 小时前
vue-cli3使用DllPlugin优化webpack打包性能
前端·javascript
forwardMyLife2 小时前
element-plus的面包屑组件el-breadcrumb
javascript·vue.js·ecmascript
计算机学姐3 小时前
基于python+django+vue的影视推荐系统
开发语言·vue.js·后端·python·mysql·django·intellij-idea
luoluoal3 小时前
java项目之基于Spring Boot智能无人仓库管理源码（springboot+vue）
java·vue.js·spring boot
mez_Blog4 小时前
个人小结（2.0）
前端·javascript·vue.js·学习·typescript
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07软件工程从理论到实践客观题汇总(头歌第一章至第八章)08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CCF-CSP认证考试 202406-3 文本分词 100分题解