快捷導(dǎo)航

vue中使用el-table組件checkbox進(jìn)行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項(xiàng)(示例代碼)

更新時間：2022年12月20日 12:15:38 作者：努力的小球

這篇文章主要介紹了vue中使用el-table組件checkbox進(jìn)行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項(xiàng)本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

vue中使用el-table組件checkbox進(jìn)行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項(xiàng)

<template>
? ? <el-dialog title="新增/編輯" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" :destroy-on-close="false" :close-on-click-modal="false">
? ? ? ? <el-table :data="companyData" v-loading="companyLoading" height="300" ref="multipleTable" @select="handleSelectionChange" @select-all="handleAllChange" :row-key="(row)=>{ return row.companyId}">
? ? ? ? ? ? <el-table-column label="全選" type="selection" width="55" :reserve-selection="true"></el-table-column>
? ? ? ? ? ? <el-table-column prop="companyName" label="企業(yè)名稱" />
? ? ? ? </el-table>
? ? ? ? <div class="pagination" style='text-align: right; margin-top: 10px'>
? ? ? ? ? ? <element-pagination :page-size="pagination.size" :current-page="pagination.page" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
? ? ? ? </div>
? ? </el-dialog>
</template>

<script>
export default {
? ? data () {
? ? ? ? return {
? ? ? ? ? ? dialogVisible: false,
? ? ? ? ? ? companyData: [],
? ? ? ? ? ? selectList: [],
? ? ? ? ? ? companyLoading: false,
? ? ? ? ? ? pagination: {
? ? ? ? ? ? ? ? page: 1,
? ? ? ? ? ? ? ? size: 20
? ? ? ? ? ? },
? ? ? ? ? ? total: 0,
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? show (id) {
? ? ? ? ? ? this.dialogVisible = true
? ? ? ? ? ? this.getDetail()
? ? ? ? },
? ? ? ? // 獲取詳情
? ? ? ? async getDetail () {
? ? ? ? ? ? const res = await this.$http.get('/api/detail?id=1')
? ? ? ? ? ? this.selectList = res.companyIdList
? ? ? ? },
? ? ? ? handleSizeChange (size) {
? ? ? ? ? ? this.pagination.size = size
? ? ? ? ? ? this.getList()
? ? ? ? },
? ? ? ? handleCurrentChange (page) {
? ? ? ? ? ? this.pagination.page = page
? ? ? ? ? ? this.getList()
? ? ? ? },
? ? ? ? 
? ? ? ? // 獲取數(shù)據(jù)
? ? ? ? async getList () {
? ? ? ? ? ? try {
? ? ? ? ? ? ? ? this.companyLoading = true
? ? ? ? ? ? ? ? const { page, size } = this.pagination
? ? ? ? ? ? ? ? const params = {
? ? ? ? ? ? ? ? ? ? url: '/api/search',
? ? ? ? ? ? ? ? ? ? params: {
? ? ? ? ? ? ? ? ? ? ? ? page: page - 1,
? ? ? ? ? ? ? ? ? ? ? ? size,
? ? ? ? ? ? ? ? ? ? ? ? like_companyName: this.value2
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? const { rows = [], total = 0 } = await this.$http(params)
? ? ? ? ? ? ? ? this.companyLoading = false
? ? ? ? ? ? ? ? this.companyData = rows
? ? ? ? ? ? ? ? this.total = total
? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? if (this.selectList.length > 0) {
? ? ? ? ? ? ? ? ? ? ? ? this.echo(rows)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }, 10);


? ? ? ? ? ? } catch (error) {
? ? ? ? ? ? ? ? console.log(error)
? ? ? ? ? ? } finally {
? ? ? ? ? ? ? ? this.companyLoading = false
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? echo (data) {
? ? ? ? ? ? let rows = []
? ? ? ? ? ? data.forEach(item => {
? ? ? ? ? ? ? ? this.selectList.forEach(item2 => {
? ? ? ? ? ? ? ? ? ? if (item.companyId === item2) {
? ? ? ? ? ? ? ? ? ? ? ? rows.push(item)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? })
? ? ? ? ? ? this.toggleSelection(rows)
? ? ? ? },
? ? ? ? // 在獲取企業(yè)數(shù)據(jù)下調(diào)用
? ? ? ? toggleSelection (rows) {
? ? ? ? ? ? if (rows) {
? ? ? ? ? ? ? ? rows.forEach(row => {
? ? ? ? ? ? ? ? ? ? this.$refs.multipleTable.toggleRowSelection(row, true)
? ? ? ? ? ? ? ? })
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? this.$refs.multipleTable.clearSelection()
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? // 選擇企業(yè)， 打鉤或者取消
? ? ? ? handleSelectionChange (selecteds, row) {
? ? ? ? ? ? // console.log(selecteds, row)
? ? ? ? ? ? if (!this.selectList.includes(row.companyId)) {
? ? ? ? ? ? ? ? // 回顯數(shù)據(jù)里沒有本條， 把這條加進(jìn)來（選中）
? ? ? ? ? ? ? ? this.selectList.push(row.companyId)
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? // 回顯數(shù)據(jù)有本條，把這條數(shù)據(jù)刪除（取消選中）
? ? ? ? ? ? ? ? this.selectList.splice(this.selectList.indexOf(row.companyId), 1)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? // 全選、取消全選
? ? ? ? handleAllChange (selects) {
? ? ? ? ? ? // console.log(selects)
? ? ? ? ? ? if (selects.length > 0) {
? ? ? ? ? ? ? ? selects.forEach(item => {
? ? ? ? ? ? ? ? ? ? if (!this.selectList.includes(item.companyId)) {
? ? ? ? ? ? ? ? ? ? ? ? this.selectList.push(item.companyId)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? this.companyData.list.forEach(item => {
? ? ? ? ? ? ? ? ? ? this.selectList.forEach((id, index) => {
? ? ? ? ? ? ? ? ? ? ? ? if (item.companyId === id) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.selectList.splice(index, 1)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? },
? ? }

}
</script>


<style lang="scss" scoped>
</style>

vue 基于el-table實(shí)現(xiàn)多頁多選、翻頁回顯過程

近半年時間在接觸vue寫pc頁面，文中內(nèi)容即在實(shí)際的開發(fā)過程中遇到的實(shí)際問題。

1、問題交代：

在pc版的列表頁面中，假設(shè)當(dāng)前在列表的第一頁，想要在當(dāng)前頁面選擇幾行數(shù)據(jù)，跳轉(zhuǎn)到其他頁面選擇幾行數(shù)據(jù)，選擇后的數(shù)據(jù)頁面展示為已勾選狀態(tài)，經(jīng)過跳轉(zhuǎn)頁面之后，數(shù)據(jù)選擇狀態(tài)依然存在，且可以將已選擇的數(shù)據(jù)的id傳到后端；即標(biāo)題所述的實(shí)現(xiàn)多頁多選、翻頁回顯問題。示例圖片如下：

下面第一個圖為第一頁選擇的數(shù)據(jù)信息：

下圖為跳轉(zhuǎn)到第二頁選擇數(shù)據(jù)的截圖：

想達(dá)到的最終效果是這兩個頁面不管怎么跳轉(zhuǎn)，都能顯示跳轉(zhuǎn)之前的選中狀態(tài)。

2、實(shí)現(xiàn)的步驟

2.1 設(shè)置table標(biāo)簽

下面加粗字體是實(shí)現(xiàn)多頁多選翻頁回顯的必要設(shè)置，下面依次說明一下

<el-table size="small" :data="listData" ref="multipleTable" row-key="getRowKeys" @select="handleCheckBox" @select-all="handleSelectAll" highlight-current-row v-loading="loading" border element-loading-text="拼命加載中" style="width: 100%;">

<el-table-column align="center" type="selection" width="60"></el-table-column>

el-table 標(biāo)簽中設(shè)置信息解讀：

ref="multipleTable"：ref是設(shè)置對這個el-table的引用，設(shè)置后可以在其他地方通過this.$refs.multipleTable 進(jìn)行調(diào)用使用數(shù)據(jù)
row-key="getRowKeys"：指定數(shù)據(jù)的 Key，用來優(yōu)化 Table 的渲染；在使用 reserve-selection 功能與顯示樹形數(shù)據(jù)時，該屬性是必填的。類型為 String 時，支持多層訪問：user.info.id，但不支持 user.info[0].id，此種情況請使用 Function
@select="handleCheckBox"：指定用戶手動勾選數(shù)據(jù)行的 Checkbox 時觸發(fā)的事件，這個名稱要和下面method中方法名對應(yīng)上
@select-all="handleSelectAll"：指定用戶手動勾選全選 Checkbox 時觸發(fā)的事件，這個名稱要和下面method中方法名對應(yīng)上

el-table-column標(biāo)簽中設(shè)置的信息解讀：

type="selection"：將el-table的第一列設(shè)置成顯示多選框

2.2 定義記錄選擇的數(shù)組

在export default 的data()中進(jìn)行定義數(shù)組，只展示了需要添加的代碼

export default {

  data() {

    return {

               multipleSelection: [],

2.3 定義手動單選和手動全選的函數(shù)/方法

在export defalt的method中編寫下面函數(shù)方法：

 //該方法是單選時的方法
 handleCheckBox(rows, row) {      
   if (this.multipleSelection.find((item) => item == row.case_id)) {
      //下面這個filter方法就是刪除的方法
      this.multipleSelection = this.multipleSelection.filter(
        (item) => item != row.case_id
      );
    } else {
      this.multipleSelection.push(row.case_id);
    },
 
 //該方法是當(dāng)頁全選的方法
 handleSelectAll(rows) {
    if (rows.length) {
      rows.forEach((row) => {
        if (!this.multipleSelection.find((item) => item == row.case_id)) {
          this.multipleSelection.push(row.case_id);
        }
      });
    } else {
      this.listData.forEach((row) => {
        this.multipleSelection = this.multipleSelection.filter(
          (item) => item != row.case_id
        );
      });
    }
  },
 
//下面的方法是進(jìn)行設(shè)置行標(biāo)識key的方法
getRowKeys(row) {
    return row.case_id
}

2.4 寫控制回顯部分代碼

因?yàn)樵趯?shí)現(xiàn)分頁的時候使用了分頁組件，即每次翻頁都會調(diào)用后端的list方法去查詢這個頁面的數(shù)據(jù)信息，所以回顯的邏輯要方法每次調(diào)用后端數(shù)據(jù)的邏輯中，代碼如下：

getdata(parameter) {
      this.loading = true
      /***
       * 調(diào)用后端接口
       */
      TestCaseList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data
            // 分頁賦值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
            //這里是回顯的功能代碼 當(dāng)切換頁面的時候 會重新調(diào)用list方法，在這個位置進(jìn)行判斷這個數(shù)據(jù)是否回顯
            this.$nextTick(()=>{
            this.listData.forEach((item,index)=>{
              if(this.multipleSelection.findIndex(v=>v == item.case_id) >= 0){
                this.$refs.multipleTable.toggleRowSelection(
                    this.$refs.multipleTable.data[index],
                    true
                );
              }
            })
            console.log('這里是每次查詢list接口之后的操作,看看是否回顯');
            console.log("multipleSelection=", this.multipleSelection);
          })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜單加載失敗，請稍后再試！')
        })
    },

具體功能實(shí)現(xiàn)講解：

this.$nextTick(()=>{

            this.listData.forEach((item,index)=>{

              if(this.multipleSelection.findIndex(v=>v == item.case_id) >= 0){

                this.$refs.multipleTable.toggleRowSelection(

                    this.$refs.multipleTable.data[index],

                    true

                );

              }

            })

實(shí)現(xiàn)功能就是每次調(diào)用完后端的list接口，判斷查出來的case_id是否有在multipleSelection數(shù)組中的，在數(shù)組中意味著要顯示成已選中的狀態(tài)，通過ref調(diào)用table數(shù)據(jù) 調(diào)用toggleRowSelection（）方法實(shí)現(xiàn)，即上面加粗部分代碼；

以上幾個步驟將如何實(shí)現(xiàn)的過程已完全描述，如有不懂可以交流哦

到此這篇關(guān)于vue 基于el-table實(shí)現(xiàn)多頁多選、翻頁回顯過程的文章就介紹到這了,更多相關(guān)vue el-table多頁多選、翻頁回顯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: