vue+elementUI實現 分頁表格的單選或者多選、及禁止部分選擇

一、vue+elementUI實現 分頁表格前的多選

多選效果圖：

 代碼如下：

<el-table
          ref="multipleTable"
          :data="listData"
          tooltip-effect="dark"
          :default-sort="{ prop: 'date', order: 'descending' }"
         :stripe="true"
         :max-height="TABLEHEIGHT"
          @selection-change="handleSelectionChange"
        >
         <el-table-column type="selection" min-width="55"></el-table-column>
         <el-table-column label="ID"  prop="id"  align="left"  width="80"></el-table-column>

 <div class="city-list-body-pagination">  
         <el-pagination
          @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          style="height:40px;city-height:40px;"
        ></el-pagination>
      </div>
 
 export default class carAcct extends Vue {
   private multipleSelection: any = []
   private listData: any = []
   private currentPage = 1
   private total = 0
   private pageSize = 20
   private TABLEHEIGHT = document.documentElement.clientHeight - 272
 
     private handleSizeChange (e: any) {
     this.pageSize = e
     this.listPage()
   }
   private handleCurrentChange (e: any) {
     this.currentPage = e
     this.listPage()
   }
   private handleSelectionChange (val: any) {
     this.multipleSelection = val
   }
 }

 

一、vue+elementUI實現 分頁表格前的單選

單選效果圖：

 

主要是使用elementUI提供的table中的toggleRowSelection（row, selected）方法，
　　*該方法用於多選表格，切換某一行的選中狀態，如果使用了第二個參數，則是設置這一行選中與否（selected 為 true 則選中）

這和上面的多選差不多完全一樣，只是在選擇方法 handleSelectionChange中加上判斷：

if (val.length > 1) {
      (this.$refs.multipleTable as any).toggleRowSelection(val[0], false)
      val.splice(0, 1)
    }

特別說明一下：因為我用的TypeScript，而TypeScript 又是強類型檢查，所以  this.$refs.multipleTable  改成了  (this.$refs.multipleTable as any)，不然會報以下錯誤：

如果不是使用的TypeScript，可以直接寫成以下格式：

 if (val.length > 1) {
      this.$refs.multipleTable.toggleRowSelection(val[0], false)
       val.splice(0, 1)
}

總代碼如下：

<el-table
          ref="multipleTable"
          :data="listData"
          tooltip-effect="dark"
          :default-sort="{ prop: 'date', order: 'descending' }"
         :stripe="true"
         :max-height="TABLEHEIGHT"
          @selection-change="handleSelectionChange"
        >
         <el-table-column type="selection" min-width="55"></el-table-column>
         <el-table-column label="ID"  prop="id"  align="left"  width="80"></el-table-column>

 <div class="city-list-body-pagination">  
         <el-pagination
          @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          style="height:40px;city-height:40px;"
        ></el-pagination>
      </div>
 
 export default class carAcct extends Vue {
   private multipleSelection: any = []
   private listData: any = []
   private currentPage = 1
   private total = 0
   private pageSize = 20
   private TABLEHEIGHT = document.documentElement.clientHeight - 272
 
     private handleSizeChange (e: any) {
     this.pageSize = e
     this.listPage()
   }
   private handleCurrentChange (e: any) {
     this.currentPage = e
     this.listPage()
   }
   private handleSelectionChange (val: any) {
     if (val.length > 1) {
      (this.$refs.multipleTable as any).toggleRowSelection(val[0], false)
      val.splice(0, 1)
    }
     this.multipleSelection = val
   }
 } 

 

3、禁止部分選擇

首先我們實現多選: 手動添加一個el-table-column，設type屬性為selection即可；然后設置 selectable 屬性來決定該行數據是否選中。

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"              
      :selectable="checkSelectable"
      width="55">
    </el-table-column>
    ......
  </el-table>
</template>

設置禁止選中的條件：

checkSelectable(row) {
  return row.date == '2016-05-03'
},

若返回為 true， 則可以選中，否則禁止選中