vue实现弹窗翻页多选效果
更新时间：2022年08月30日 15:25:05 作者：朝阳39
这篇文章主要为大家详细介绍了vue实现弹窗翻页多选效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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)"
style="margin-right: 10px"
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 style="text-align: right">
<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"
style="margin: 20px 0px"
></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项目有时候需要根据页面需要动态的去修改页面标题名称，本文就来介绍一下，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了浅谈vue 多个变量同时赋相同值互相影响，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了解决vue移动端适配问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
本文以 Vue-CLI 为例介绍引入 simple-mock 实现前端开发数据模拟的步骤。感兴趣的朋友跟随小编一起看看吧2018-11-11
这篇文章主要为大家详细介绍了vue实现登录时滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue版数字翻牌器的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在vue项目中,输入框只允许输入数字,现将自己使用的一种方法记录,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2023-11-11
Vite是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具,下面这篇文章主要给大家介绍了关于如何使用Vue3+Vite+TS快速搭建一套实用脚手架的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue使用mixin分发组件的可复用功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要为大家介绍了vue3的二维码组件vue3-next-qrcode示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
最新评论