vue+elementUI实现 分页表格的单选或者多选

1、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
   }
 }

 

1、vue+elementUI实现 分页表格前的单选

单选效果图：

 

主要是使用elementUI提供的table中的toggleRowSelection（row, selected）方法，
　　*该方法用于多选表格，切换某一行的选中状态，若是使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

这和上面的多选差很少彻底同样，只是在选择方法 handleSelectionChange中加上判断：

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

特别说明一下：由于我用的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
   }
 }