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>
相关推荐
酷酷的阿云8 分钟前
不用ECharts！从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程（一）：从零配置 ESLint
javascript·eslint
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据2 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统（JAVA毕业设计）
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解