一、vue+elementUI实现 分页表格前的多选
1 <el-table 2 ref="multipleTable" 3 :data="listData" 4 tooltip-effect="dark" 5 :default-sort="{ prop: ‘date‘, order: ‘descending‘ }" 6 :stripe="true" 7 :max-height="TABLEHEIGHT" 8 @selection-change="handleSelectionChange" 9 > 10 <el-table-column type="selection" min-width="55"></el-table-column> 11 <el-table-column label="ID" prop="id" align="left" width="80" ></el-table-column> 17 18 19 <div class="city-list-body-pagination"> 20 <el-pagination 21 @size-change="handleSizeChange" 22 @current-change="handleCurrentChange" 23 :current-page="currentPage" 24 :page-size="pageSize" 25 layout="total, prev, pager, next, jumper" 26 :total="total" 27 style="height:40px;city-height:40px;" 28 ></el-pagination> 29 </div> 30 31 export default class carAcct extends Vue { 32 private multipleSelection: any = [] 33 private listData: any = [] 34 private currentPage = 1 35 private total = 0 36 private pageSize = 20 37 private TABLEHEIGHT = document.documentElement.clientHeight - 272 38 39 private handleSizeChange (e: any) { 40 this.pageSize = e 41 this.listPage() 42 } 43 private handleCurrentChange (e: any) { 44 this.currentPage = e 45 this.listPage() 46 } 47 private handleSelectionChange (val: any) { 48 this.multipleSelection = val 49 } 50 }
一、vue+elementUI实现 分页表格前的单选
这和上面的多选差不多完全一样,只是在选择方法中加上判断:
1 if (val.length > 1) { 2 (this.$refs.multipleTable as any).toggleRowSelection(val[0], false) 3 val.splice(0, 1) 4 }
代码如下:
<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 } }
原文:https://www.cnblogs.com/dupenghui/p/13231488.html