您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
今天小编给大家分享一下怎么用vue实现弹窗翻页多选效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
点选择按钮后,弹出选择用户弹窗,可翻页勾多个用户
<template> <div> <el-button size="small" type="primary" @click="choose">选择</el-button> <p> <el-tag v-for="(item,index) in allSelectedUserList" :key="index" @close="removeUser(index)" closable> {{item.name}} </el-tag> </p> <el-dialog :visible.sync="dialogVisible" title="选择用户" v-if="dialogVisible" width="40%" append-to-body> <s-table ref="table" @selectionChange="selectionChange" @loadData="loadData" :data="tableData" :config="tableConfig"></s-table> <span slot="footer"> <el-button @click="dialogVisible = false" size="mini">取 消</el-button> <el-button @click="chooseConfirm" size="mini" type="primary">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, // 最终选中的所有数据 allSelectedUserList: [], // 最终选中的全部唯一字段列表 allUniquePropList: [], // 唯一字段 uniqueProp: 'id', // 每次弹窗中选中的所有数据 allSelectedList: [], tableData: [], tableConfig: { showSelect: true, selectable: (row, rowIndex) => { if (this.allUniquePropList.indexOf(row[this.uniqueProp]) === -1) { if (rowIndex === row.index) { return false } else { return true } } }, pageConfig: { pageSizeList: [3, 5, 10], pageSize: 3, currentPage: 1, total: 0 }, itemList: [ { label: 'id', prop: 'id' }, { label: '姓名', prop: 'name' }, { label: '年龄', prop: 'age' }, ], } } }, mounted() { this.loadData() }, methods: { // 点击选择按钮 choose() { this.allUniquePropList = [] this.allSelectedUserList.forEach( item => { this.allUniquePropList.push(item[this.uniqueProp]) } ) this.allSelectedList = [] this.dialogVisible = true }, // 点击选择弹窗的确定按钮 chooseConfirm() { this.allSelectedUserList = this.allSelectedUserList.concat(this.allSelectedList) this.dialogVisible = false }, // 加载数据 loadData(newPageConfig) { if (newPageConfig && newPageConfig.currentPage) { this.tableConfig.pageConfig.currentPage = newPageConfig.currentPage } if (newPageConfig && newPageConfig.pageSize) { this.tableConfig.pageConfig.pageSize = newPageConfig.pageSize } this.$http.get("/user/pages", { params: { currentPage: this.tableConfig.pageConfig.currentPage, pageSize: this.tableConfig.pageConfig.pageSize } }) .then(res => { let data = res.data this.tableData = data.records; this.tableConfig.pageConfig.total = data.total this.updateSelectedMark() }) }, // 改变多选列的选中状态时,更新选中列表 selectionChange(pageSelectedList) { // 当页唯一字段组成的列表 let uniquePropList = [] this.tableData.forEach(row => { uniquePropList.push(row[this.uniqueProp]) }) // 从全部选中的数据中,过滤掉当前页的数据,再添加当前页选中的数据 this.allSelectedList = this.allSelectedList.filter(row => !uniquePropList.includes(row[this.uniqueProp]) ).concat(pageSelectedList) }, // 更新选中标记--选中数据与当页数据的交集,标记为选中状态 updateSelectedMark() { this.$nextTick( () => { let pageSelectedList = [] this.allSelectedList.forEach(row1 => { this.tableData.forEach(row2 => { if (row1[this.uniqueProp] === row2[this.uniqueProp]) { pageSelectedList.push(row2) } }) }) pageSelectedList.forEach(row => { this.$refs.table.toggleRowSelection(row); }) } ) }, // 移除选择的用户 removeUser(index) { this.allSelectedUserList.splice(index, 1); }, } } </script> <style scoped> </style>
s-table全局表格组件
<template> <div> <el-table ref="table" @select="rowSelectChange" @select-all="pageSelectChange" @row-click="getCurrentRow" :data="data" border :highlight-current-row="!config.closeHighlightRow" empty-text="暂无数据"> <el-table-column :selectable="config.selectable" v-if="config.showSelect" type="selection" width="55"> </el-table-column> <el-table-column :align="item.align?item.align:'center'" :label=item.label :prop=item.prop :min-width="item.minWidth?item.minWidth:'120'" :formatter="item.formatter" v-for="(item,index) in config.itemList" :key="index" > </el-table-column> <slot name="操作"> </slot> </el-table> <!-- 分页 --> <div > <el-pagination :current-page="config.pageConfig.currentPage" :page-size="config.pageConfig.pageSize" :page-sizes="config.pageConfig.pageSizeList" :total="config.pageConfig.total" @current-change="currentPageChange" @size-change="pageSizeChange" layout="total, sizes, prev, pager, next, jumper" ></el-pagination> </div> </div> </template> <script> export default { props: { data: Array, config: Object, selectable: Function }, data() { return {} }, methods: { rowSelectChange(pageSelected, row) { this.$emit('selectionChange', pageSelected, ) }, pageSelectChange(pageSelected) { this.$emit('selectionChange', pageSelected) }, toggleRowSelection(row) { this.$refs.table.toggleRowSelection(row); }, selectionChange(pageSelected) { this.$emit('selectionChange', pageSelected) }, currentPageChange(newPage) { this.$emit('loadData', { currentPage: newPage } ) }, pageSizeChange(newPageSize) { this.$emit('loadData', { pageSize: newPageSize } ) }, getCurrentRow(row) { this.$emit('getCurrentRow', row) } } } </script> <style scoped> </style>
以上就是“怎么用vue实现弹窗翻页多选效果”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。