怎么用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)"
                    
                    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實現彈窗翻頁多選效果”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。