Vue3使用el-table組件實(shí)現(xiàn)分頁(yè)、多選以及回顯功能

更新時(shí)間：2024年09月22日 09:36:29 作者：For.?tomorrow

這篇文章主要介紹了Vue3使用el-table組件實(shí)現(xiàn)分頁(yè)、多選以及回顯功能,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

需求

使用 dialog 顯示 table，同時(shí)關(guān)閉時(shí)銷毀
el-table 表格多選
回顯已選擇的表格數(shù)據(jù)，分頁(yè)來(lái)回切換依然正確顯示數(shù)據(jù)
點(diǎn)擊取消，數(shù)據(jù)回到初始化勾選狀態(tài)

思路

1、實(shí)現(xiàn)分頁(yè)多選并保存上一頁(yè)的選擇

分別添加以下屬性

Table 屬性

Table-column 屬性

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

2、記錄當(dāng)前選擇的數(shù)據(jù)

定義 el-table 的 selection-change 事件回調(diào)函數(shù)

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

前兩步已經(jīng)能滿足不需要回顯的分頁(yè)多選功能，但是要實(shí)現(xiàn)數(shù)據(jù)的回顯還需要以下處理。

3、默認(rèn)數(shù)據(jù)的回顯

假設(shè)定義兩個(gè)響應(yīng)式數(shù)組表示默認(rèn)選擇和當(dāng)前選擇

// 默認(rèn)選中列表
const defaultSelected = ref<any[]>([])
// 當(dāng)前選中的列表
const selected = ref<any[]>([])
// 通過(guò) selection-change 事件回調(diào)保存當(dāng)前選擇的數(shù)據(jù)
const handlechange = (val: any[]) => {
  selected.value = val
}

在顯示彈窗方法里通過(guò) el-table 中的 toggleRowSelection 方法初始化選中所有默認(rèn)選項(xiàng)（注意是所有的選項(xiàng)，而不只是當(dāng)前頁(yè)的選項(xiàng)），如果只選擇當(dāng)前頁(yè)的默認(rèn)選項(xiàng)，selected 將會(huì)丟失其他默認(rèn)選項(xiàng)

// 顯示表格彈窗
const showDialog = () => {
  getTableList()
  setTimeout(() => {
    for (const item of defaultSelected.value) tableRef.value.toggleRowSelection(item, true) // 選中默認(rèn)選中的行
  }, 0)
  visible.value = true
}

至此實(shí)現(xiàn)了所有功能，總結(jié)一下原理就是 el-table 通過(guò) row-key 來(lái)判斷是否已選擇，所以通過(guò) toggleRowSelection 選擇所有默認(rèn)的選項(xiàng)，不管點(diǎn)擊哪一頁(yè)都會(huì)正確回顯數(shù)據(jù)，并且定義了 handlechange 會(huì)保存新的改變

如果每次確認(rèn)后不銷毀 table 組件，需要調(diào)用 clearSelection 方法清空所有已選項(xiàng)

const handleClick = () => {
  // 保存新的數(shù)據(jù)
  defaultSelected.value = cloneDeep(selected.value)
  selected.value.length = 0
  pagination.currentPage = 1
  // 清空表格已選項(xiàng)
  tableRef.value.clearSelection()
  visible.value = false
}

完整代碼

記錄下代碼，互相學(xué)習(xí)提提意見

<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, // 當(dāng)前頁(yè)數(shù)
  pageSize: 10, // 每頁(yè)顯示條數(shù)
  pageSizes: [10, 20, 30, 40, 50], // 每頁(yè)顯示個(gè)數(shù)選擇器的選項(xiàng)設(shè)置
  total: 100 // 總條數(shù)
})

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

const tableRef = ref<any>()

// 默認(rèn)選中列表
const defaultSelected = ref<any[]>([])

// 當(dāng)前選中的列表
const selected = ref<any[]>([])

const getTableList = async () => {
  // 分頁(yè)查詢方法
  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) // 選中默認(rèn)選中的行
  }, 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
  // 清空選項(xiàng)
  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">確認(rèn)</el-button>
      </div>
      <!-- 分頁(yè)器 -->
      <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>

以上就是Vue3使用el-table組件實(shí)現(xiàn)分頁(yè)、多選以及回顯功能的詳細(xì)內(nèi)容，更多關(guān)于Vue3 el-table分頁(yè)、多選及回顯的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: