需求：不管是頁面切換還是通過搜索獲取數(shù)據(jù)，都要保持已選中的行保持勾選狀態(tài)，同時(shí)將選中行的內(nèi)容以標(biāo)簽的形式顯示出來，當(dāng)點(diǎn)擊關(guān)閉標(biāo)簽時(shí)可以對(duì)應(yīng)取消選中狀態(tài)，點(diǎn)擊行中的任意位置也可以切換選中狀態(tài)，單獨(dú)勾選復(fù)選框一樣可以達(dá)到要求。

由于需求相對(duì)還是蠻復(fù)雜的，直接使用row-key和reserve-selection，難以實(shí)現(xiàn)。所以直接通過書寫代碼來控制表格的勾選狀態(tài)。

注意：我使用的是vue3 + ts!!!!

1. 第一步：書寫html代碼

給el-table添加對(duì)應(yīng)勾選的監(jiān)聽事件，row-click用于監(jiān)聽鼠標(biāo)選中某行時(shí)的勾選事件(不需要可去掉，我的需求是鼠標(biāo)選中某行也要勾選)；selection-change用于監(jiān)聽鼠標(biāo)點(diǎn)擊某行前面的勾選框、選中某行實(shí)現(xiàn)的勾選、表格左上角的全選，三種狀態(tài)的事件；select用于監(jiān)聽框勾選數(shù)據(jù)行的 Checkbox 時(shí)觸發(fā)的事件；select-all用于監(jiān)聽鼠標(biāo)點(diǎn)擊表格左上角的全選框。

<!-- 已選擇點(diǎn)檢項(xiàng) -->
<el-row
  align="middle"
  class="selected"
  justify="space-between"
  type="flex"
>
  <el-col :span="24">
    <span>已選擇：</span>
    <template v-if="selectedCheckOptions">
      <el-tag
        v-for="(item, i) in selectedCheckOptions"
        :key="i"
        closable
        :disable-transitions="false"
        @close="handleCloseTag(item, i)"
      >
        {{ item }}
      </el-tag>
    </template>
  </el-col>
</el-row>
<!-- 表格部分 -->
<el-table
  ref="multipleTableRef"
  :data="gridData"
  :header-cell-style="{
    'background-color': '#fafafa',
    color: '#000',
  }"
  size="small"
  style="width: 100%"
  @row-click="handleClickTableRow"
  @select="onTableSelect"
  @select-all="selectSingleTableAll"
  @selection-change="handleChange"
>
  <el-table-column type="selection" width="50" />
  <el-table-column fixed label="序號(hào)" type="index" width="60" />
  <el-table-column label="點(diǎn)檢項(xiàng)" prop="itemName" />
  <el-table-column label="分類" prop="itemTypeName" />
</el-table>
<!-- 分頁 -->
<div class="page">
  <el-pagination
    v-model:currentPage="currentPage"
    layout="total, prev, pager, next"
    small
    :total="total"
    @current-change="handleCurrentChange"
  />
</div>

2.?所需數(shù)據(jù)

// 只將表格中設(shè)計(jì)到需求的重要數(shù)據(jù)進(jìn)行展示
const modelInfo = reactive({
  // 當(dāng)前所在頁面的表格數(shù)據(jù)
  gridData: [],
  // 添加點(diǎn)檢項(xiàng)表格全部數(shù)據(jù)
  tableData: [],
  tableAllSelectedId: [] as any, // 保存表格勾選的全部id
  tableAllSelectedRow: [] as any, // 保存表格勾選的行數(shù)據(jù)
  selectedCheckOptions: [] as any, // 已選擇的點(diǎn)檢項(xiàng)
})

// 獲取已選擇的點(diǎn)檢項(xiàng)
modelInfo.selectedCheckOptions = computed(() => {
  return modelInfo.tableAllSelectedRow.map((r: any) => r.itemName)
})

3.所需方法

?（1）從后臺(tái)獲取表格的分頁數(shù)據(jù)的方法

// 獲取表格數(shù)據(jù)的方法 （這里根據(jù)后端給的接口進(jìn)行獲取即可）
const getCheckItemData = () => {
  checkItemList({
    itemName: formInline.checkOption,
    itemTypeId: formInline.itemTypeId[formInline.itemTypeId.length - 1],
    filter: [],
    paging: {
      dir: 'DESC',
      limit: modelInfo.pageSize,
      page: modelInfo.currentPage,
      sort: 'createTime',
      start: 0,
    },
  }).then((res: any) => {
    modelInfo.gridData = res.data.records
    // 條數(shù)必須是數(shù)字才可以顯示在分頁控件中
    modelInfo.total = parseInt(res.data.total)
    // 關(guān)鍵代碼（實(shí)現(xiàn)已勾選行數(shù)據(jù)保持選中狀態(tài)）
    nextTick(() => {
      modelInfo.gridData.forEach((item: any) => {
        if (modelInfo.tableAllSelectedId.indexOf(item.itemId) > -1) {
          multipleTableRef.value?.toggleRowSelection(item, true)
        } else {
          multipleTableRef.value?.toggleRowSelection(item, false)
        }
      })
    })
  })
}

（2）當(dāng)選擇項(xiàng)發(fā)生變化時(shí)觸發(fā)的方法

// 當(dāng)選擇項(xiàng)發(fā)生變化時(shí)會(huì)觸發(fā)該事件
const handleChange = (val: any) => {
  // 將獲取到的id存入tableAllSelectedId數(shù)組中
  val.forEach((item: any) => {
    if (modelInfo.tableAllSelectedId.indexOf(item.itemId) === -1) {
      modelInfo.tableAllSelectedId.push(item.itemId)
      modelInfo.tableAllSelectedRow.push(item)
    }
  })
}

（3）點(diǎn)擊表格某一行的方法

// 點(diǎn)擊表格某一行的方法
const handleClickTableRow = (row: any) => {
// 判斷當(dāng)前行是否已選中
  if (
    findIndexInObejctArr(
      JSON.parse(JSON.stringify(modelInfo.tableAllSelectedRow)),
      row,
      'itemId'
    ) > -1
  ) {
    const index = modelInfo.tableAllSelectedId.indexOf(row.itemId)
    modelInfo.tableAllSelectedId.splice(index, 1)
    modelInfo.tableAllSelectedRow.splice(index, 1)
    nextTick(() => {
      modelInfo.gridData.forEach((item: any) => {
        if (modelInfo.tableAllSelectedId.indexOf(item.itemId) > -1) {
          multipleTableRef.value?.toggleRowSelection(item, true)
        } else {
          multipleTableRef.value?.toggleRowSelection(item, false)
        }
      })
    })
  } else {
    multipleTableRef.value?.setCurrentRow(row)
    multipleTableRef.value!.toggleRowSelection(row, true)
  }
}

（4）勾選數(shù)據(jù)行的 Checkbox 時(shí)觸發(fā)的方法

// 勾選數(shù)據(jù)行的 Checkbox 時(shí)觸發(fā)的方法
const onTableSelect = (rows: any, row: any) => {
  //  判斷是點(diǎn)擊了表格勾選還是取消勾選，true為選中，0或false是取消選中
  const selected = rows.length && rows.indexOf(row) !== -1
  if (!selected) {
    // 如果點(diǎn)擊取消勾選
    const index = modelInfo.tableAllSelectedId.indexOf(row.itemId)
    modelInfo.tableAllSelectedId.splice(index, 1) // 取消勾選，則刪除id
    modelInfo.tableAllSelectedRow.splice(index, 1) // 取消勾選，則刪除數(shù)據(jù)
  }
}

（5）表格全選觸發(fā)的方法

// 表格全選觸發(fā)的方法
const selectSingleTableAll = (selection: any) => {
  // 獲取當(dāng)前頁碼所顯示的數(shù)據(jù)
  const a: any = modelInfo.gridData
  // 獲取當(dāng)前頁勾選的數(shù)據(jù)
  const b = selection
  let flag_inCurrentPage
  selection.forEach((item: any) => {
    if (item.itemId === a[0].itemId) {
      flag_inCurrentPage = true
      return
    }
  })
  const flag = a.length === b.length && flag_inCurrentPage
  if (flag) {
    // 切換成了全選狀態(tài)
    modelInfo.gridData.forEach((r: any) => {
      if (modelInfo.tableAllSelectedId.indexOf(r.itemId) === -1) {
        modelInfo.tableAllSelectedId.push(r.itemId) // 如果點(diǎn)擊全選就保存全部id
        modelInfo.tableAllSelectedRow.push(r) //如果點(diǎn)擊全選就保存全部數(shù)據(jù)
      }
    })
  } else {
    // 切換成了非全選狀態(tài)
    modelInfo.tableAllSelectedId = []
    modelInfo.tableAllSelectedRow = []
  }
}

（6）查找對(duì)象在對(duì)象數(shù)組中位置的方法

// 查找對(duì)象在對(duì)象數(shù)組中的位置
findIndexInObejctArr: function(arr, obj) {
  for (let i = 0, iLen = arr.length; i < iLen; i++) {
    if (arr[i].deliverId === obj.deliverId) {
       return i
    }
  }
  return -1
}

（7）刪除標(biāo)簽的方法

// 刪除標(biāo)簽的方法
const handleCloseTag = (tag: string, index: number) => {
  // 先刪除保存表格勾選的全部行數(shù)據(jù)中對(duì)應(yīng)的數(shù)據(jù)，以及保存表格勾選的全部行id中對(duì)應(yīng)的數(shù)據(jù)
  modelInfo.tableAllSelectedId.splice(index, 1)
  modelInfo.tableAllSelectedRow.splice(index, 1)
  // 再根據(jù)已勾選的全部id來將對(duì)應(yīng)行選中
  nextTick(() => {
    modelInfo.gridData.forEach((item: any) => {
      if (modelInfo.tableAllSelectedId.indexOf(item.itemId) > -1) {
        multipleTableRef.value?.toggleRowSelection(item, true)
      } else {
        multipleTableRef.value?.toggleRowSelection(item, false)
      }
    })
  })
}

（8）切換頁碼的方法

const handleCurrentChange = (val: number) => { 
   modelInfo.currentPage = val
   getCheckItemData()
}

（9）查詢方法

// 搜索方法
const onSearch = () => {
  modelInfo.currentPage = 1
  getCheckItemData()
}

（10）確認(rèn)添加的方法（由于我的表格是出現(xiàn)在彈出層中的，故增加了此方法，該方法和本文章的需求無關(guān)，可以直接忽視）

// 確認(rèn)添加點(diǎn)檢項(xiàng)的方法
const confirmAdd = () => {
  modelInfo.checkOptions = modelInfo.tableAllSelectedRow
  dialogAddVisible.value = false
  // 清除搜索內(nèi)容
  formInline.checkOption = ''
  formInline.itemTypeId = []
  modelInfo.currentPage = 1
  getCheckItemData()
}

4.效果圖

?（1）選中的會(huì)在上面同步顯示

?

（2）跨行也能保留選中狀態(tài)和標(biāo)簽

?

（3）搜索也一樣能保留選中狀態(tài)

借鑒：elementui el-table表格實(shí)現(xiàn)跨頁(翻頁)保存勾選狀態(tài)(后端分頁)_公孫元二的博客-CSDN博客_el-table跨頁勾選?文章來源地址http://www.zghlxwxcb.cn/news/detail-692496.html

到了這里，關(guān)于elementui el-table表格實(shí)現(xiàn)翻頁和搜索均保持勾選狀態(tài)（后端分頁）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！