Vue3中el-table组件实现分页,多选以及回显

el-table组件实现分页,多选以及回显

需求

  1. 使用 dialog 显示 table,同时关闭时销毁
  2. el-table 表格多选
  3. 回显已选择的表格数据,分页来回切换依然正确显示数据
  4. 点击取消,数据回到初始化勾选状态

思路

1、实现分页多选并保存上一页的选择

分别添加以下属性
Table 属性

Table-column 属性

html 复制代码
<el-table ref="tableRef" row-key="id" @selection-change="handlechange">
  <el-table-column type="selection" :reserve-selection="true" align="center" />
</el-table>

2、记录当前选择的数据

定义 el-table 的 selection-change 事件回调函数

typescript 复制代码
const handlechange = (val: any[]) => {
  selected.value = val
}

前两步已经能满足不需要回显的分页多选功能,但是要实现数据的回显还需要以下处理。

3、默认数据的回显

假设定义两个响应式数组表示默认选择和当前选择

typescript 复制代码
// 默认选中列表
const defaultSelected = ref<any[]>([])
// 当前选中的列表
const selected = ref<any[]>([])
// 通过 selection-change 事件回调保存当前选择的数据
const handlechange = (val: any[]) => {
  selected.value = val
}

在显示弹窗方法里通过 el-table 中的 toggleRowSelection 方法初始化选中所有默认选项(注意是所有的选项,而不只是当前页的选项),如果只选择当前页的默认选项,selected 将会丢失其他默认选项

typescript 复制代码
// 显示表格弹窗
const showDialog = () => {
  getTableList()
  setTimeout(() => {
    for (const item of defaultSelected.value) tableRef.value.toggleRowSelection(item, true) // 选中默认选中的行
  }, 0)
  visible.value = true
}

至此实现了所有功能,总结一下原理就是 el-table 通过 row-key 来判断是否已选择,所以通过 toggleRowSelection 选择所有默认的选项,不管点击哪一页都会正确回显数据,并且定义了 handlechange 会保存新的改变

如果每次确认后不销毁 table 组件,需要调用 clearSelection 方法清空所有已选项

typescript 复制代码
const handleClick = () => {
  // 保存新的数据
  defaultSelected.value = cloneDeep(selected.value)
  selected.value.length = 0
  pagination.currentPage = 1
  // 清空表格已选项
  tableRef.value.clearSelection()
  visible.value = false
}

完整代码

记录下代码,互相学习提提意见

typescript 复制代码
<script setup lang="tsx">
import { useI18n } from '@/hooks/web/useI18n'
import { getTableListApi } from '@/api/table'
import { TableData } from '@/api/table/types'
import { ref, reactive, watch } from 'vue'
import { ElTableColumn, ElTable, ElPagination, ElButton, ElDialog } from 'element-plus'
import { cloneDeep } from 'lodash-es'

const { t } = useI18n()

const columns: any[] = [
  {
    type: 'selection',
    width: 60,
    align: 'center'
  },
  {
    field: 'title',
    label: t('tableDemo.title')
  },
  {
    field: 'author',
    label: t('tableDemo.author')
  },
  {
    field: 'display_time',
    label: t('tableDemo.displayTime'),
    sortable: true
  },
  {
    field: 'importance',
    label: t('tableDemo.importance')
  },
  {
    field: 'pageviews',
    label: t('tableDemo.pageviews')
  }
]

const loading = ref(true)

const visible = ref(false)

const pagination = reactive({
  currentPage: 1, // 当前页数
  pageSize: 10, // 每页显示条数
  pageSizes: [10, 20, 30, 40, 50], // 每页显示个数选择器的选项设置
  total: 100 // 总条数
})

const tableDataList = ref<TableData[]>([])

const tableRef = ref<any>()

// 默认选中列表
const defaultSelected = ref<any[]>([])

// 当前选中的列表
const selected = ref<any[]>([])

const getTableList = async () => {
  // 分页查询方法
  const res = await getTableListApi({ ...pagination, pageIndex: pagination.currentPage })
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
  if (res) {
    tableDataList.value = res.data.list
  }
}

const showDialog = () => {
  getTableList()
  setTimeout(() => {
    for (const item of defaultSelected.value) tableRef.value.toggleRowSelection(item, true) // 选中默认选中的行
  }, 0)
  visible.value = true
}

const handlechange = (val: any) => {
  selected.value = val
}

const handleClick = () => {
  defaultSelected.value = cloneDeep(selected.value)
  selected.value.length = 0
  pagination.currentPage = 1
  // 清空选项
  tableRef.value.clearSelection()
  visible.value = false
}

watch(() => [pagination.currentPage, pagination.pageSize], getTableList, { immediate: true })
</script>

<template>
  <!-- 控制弹窗显示 -->
  <ElButton type="primary" @click="showDialog">显示</ElButton>
  <!-- 表格弹窗 -->
  <el-dialog title="提示" v-model="visible" width="80%" destroyOnClose>
    <div class="w-full h-800px flex flex-col justify-between">
      <el-table
        ref="tableRef"
        height="760px"
        :data="tableDataList"
        :loading="loading"
        row-key="id"
        @selection-change="handlechange"
      >
        <el-table-column
          v-for="column in columns"
          :type="column.type"
          :key="column.field"
          :prop="column.field"
          :label="column.label"
          :reserveSelection="true"
        />
      </el-table>
      <div class="flex justify-start">
        <el-button type="primary" @click="handleClick">确认</el-button>
      </div>
      <!-- 分页器 -->
      <div class="flex justify-end">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="pagination.pageSizes"
        />
      </div>
    </div>
  </el-dialog>
</template>
相关推荐
逐·風42 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果3 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄4 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰5 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询