首页 > 其他 > 详细

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

时间:2020-07-03 17:20:44      阅读:130      评论:0      收藏:0      [点我收藏+]

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

 

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

原文:https://www.cnblogs.com/dupenghui/p/13231488.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!