首页 > 其他 > 详细

ElementUI Table组件,如何在多页数据下勾选多行

时间:2020-04-09 16:07:01      阅读:146      评论:0      收藏:0      [点我收藏+]
https://juejin.im/post/5cde644ce51d45108813899f


<
template> <div class="demo-example"> <el-table ref="table" v-loading="loading" :data="list" height="650" border @select="onSelect" @select-all="onSelectAll" @selection-change="onSelectionChange" > <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="u_createTime" label="注册时间"></el-table-column> <el-table-column prop="u_id" label="用户ID"></el-table-column> <el-table-column prop="u_nickname" label="用户名称"></el-table-column> <el-table-column prop="u_phone" label="用户账户"></el-table-column> <el-table-column prop="u_gender" label="性别"></el-table-column> <el-table-column label="角色"> <template slot-scope="scope"> <span>{{scope.row.u_role === 1 ? ‘团队长‘ : ‘保险人‘}}</span> </template> </el-table-column> <el-table-column prop="u_companyNum" label="所属企业数量"></el-table-column> <el-table-column prop="ha_addPeople" label="所属群组"> <template slot-scope="scope"> <el-button @click="onChakan(scope.row)" type="text" style="color:#67c23a" size="small">查看</el-button> </template> </el-table-column> <el-table-column prop="u_lastLoginTime" label="最近登录时间"></el-table-column> </el-table> <div class="block pag" v-if="total"> <el-pagination @current-change="onChangePage" :current-page="currentPage" :page-size="10" layout="total, prev, pager, next, jumper" :total="total" ></el-pagination> </div> </div> </template> <script> export default { data() { return { selections: {}, // 保存已选择过的row list: [], total: 0, curPage: 1, }; }, //方法事件 methods: { // 勾选时候,记录[{u_id: row}, ...] onSelect(selection, row) { if (this.selections[row.u_id]) { delete this.selections[row.u_id]; } else { this.selections[row.u_id] = row; } }, // 全选情况 onSelectAll(selection) { // 全选 if (selection.length) { selection.forEach(row => { this.selections[row.u_id] = row; }) } else { // 取消全选 this.list.forEach(row => { delete this.selections[row.u_id]; }) } }, // 对已选择过的row勾选,返回到上一页时候 checkRows() { const keys = Object.keys(this.selections); const rows = this.list.filter(row => { return keys.includes(String(row.u_id)); }); rows.map(row => { this.$refs.table.toggleRowSelection(row); }); }, // 省略... // 获取数据列表 getData() { // ... }, }, created() { this.getData(); } }; </script>

 

ElementUI Table组件,如何在多页数据下勾选多行

原文:https://www.cnblogs.com/MR-cui/p/12667182.html

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