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=" 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， 则可以选中，否则禁止选中