element ui+vue实现分页组件传值

野性酷女 2023-10-10 08:28 17阅读 0赞

props：父传子

分页公用组件：

**element ui样式：**

**传值组件：props父传子**

**data定义变量：**

**方法：**

<template>
        <section>
            <div class="pagination">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-size="page.pageSize"
                    :page-sizes="[5, 10, 20, 40]"
                    :total="page.pageTotal"
                    layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </section>
    </template>
    <script>
        /**
         * 分页共通组件
         */
        export default {
            name: 'ThePagination',
            props: {
                /**
                 * 定义 ThePagination组件特有的属性
                 */
                attribute: {
                    handleChange() {
                    }
                }
            },
            data() {
                return {
                    page: {
                        // 当前页数
                        currentPage: 1,
                        // 每页默认显示条数
                        pageSize: 10,
                        // 总条数
                        pageTotal: 0,
                    },
                }
            },
            methods: {
                /**
                 * 选择每页多个条事件
                 *
                 * @param pageSize
                 */
                handleSizeChange(pageSize) {
    
                    this.page.pageSize = pageSize;
                    this.attribute.handleChange({currentPage: 1, pageSize: this.page.pageSize});
                },
    
                /**
                 * 点击页码事件
                 *
                 * @param currentPage
                 */
                handleCurrentChange(currentPage) {
    
                    this.page.currentPage = currentPage;
                    this.attribute.handleChange({currentPage: this.page.currentPage, pageSize: this.page.pageSize});
                },
            }
        }
    </script>
    <style scoped>
    </style>

父组件引用：

**分页样式：**

**为ThePagination 属性赋值：**

**props组件传值：**

**调用方法：**

<template>
        <section>
            <el-table
                :data="tableData"
                border
                stripe
                :header-cell-style="{'background-color': '#fafafa', 'color': '#409EFF'}"
                class="g-table-width">
                <el-table-column
                    align="center"
                    type="index"
                    label="序号"
                    width="50">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="operatorRoleName"
                    label="角色名称">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="updateTime"
                    :formatter="dateMoment"
                    label="最近操作时间">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <ThePagination ref="refPagination" :attribute="paginationAttribute"></ThePagination>
            
            <el-dialog
                title="编辑角色"
                :visible.sync="roleEditModal"
                @close="closeRoleEditModal"
                width="30%"
                center>
                <el-form
                    :model="roleEditForm"
                    ref="roleEditForm"
                    :rules="RoleValidate"
                    class="el-form--inline">
                    <el-form-item label="角色名称:" prop="operatorRoleName">
                        <el-input v-model="roleEditForm.operatorRoleName" placeholder="请输入角色名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用" prop="initiateStatus">
                        <el-radio-group v-model="roleEditForm.initiateStatus">
                            <el-radio :label="1">启用</el-radio>
                            <el-radio :label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-row class="f-tar">
                        <el-form-item>
                            <el-button @click="cancel('roleEditForm')">取消</el-button>
                            <el-button type="primary" @click="submitForm('roleEditForm')">确定</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </el-dialog>
        </section>
    </template>
    <script>
        /**
         * 角色table
         */
        // 引入分页
       import ThePagination from '@/components/common/ThePagination.vue'
        // 引入RoleApi
        import RoleApi from '@/api/accountManage/role/index.js'
        // 引入角色校验
        import RoleValidate from '@/validate/accountManage/role/RoleValidate.js'
    
        export default {
            name: 'RoleTable',
           components: { ThePagination }, props: { attribute: { listForm: {} } },
            data() {
                return {
                    // table数据
                    tableData: [],
                    // 为 ThePagination组件 属性赋值
                    paginationAttribute: {
                        handleChange: this.handleChange
                    },
                    // 编辑角色modal 默认false
                    roleEditModal: false,
                    // 编辑角色表单
                    roleEditForm: {
                        // id
                        id: '',
                        // 角色名称
                        operatorRoleName: '',
                        // 是否启用，1是启用，0是禁用
                        initiateStatus: null
                    },
                    // 校验
                    RoleValidate: RoleValidate.roleValidate
                }
            },
            methods: {
                /**
                 * 初始化列表查询
                 *
                 * @param params
                 * @returns {Promise<void>}
                 */
                queryList(params) {
    
                    RoleApi.roleList(params).then((result) => {
                        if (result.data.status !== '0000') {
                            this.$message.error(result.data.msg);
                            return false;
                        }
    
                        if (result.data.data == null) {
                            this.$message.error(result.data.msg);
                            return false;
                        }
    
                        this.tableData = result.data.data.content;
                        this.$refs.refPagination.page.pageTotal = result.data.data.totalElements;
                    });
                },
    
                /**
                 * 列表查询
                 */
                initTable() {
    
                    let params = {
                        currentPage: this.$refs.refPagination.page.currentPage,
                        pageSize: this.$refs.refPagination.page.pageSize,
                        enablePage: true
                    };
    
                    this.queryList(params);
                },
    
                /**
                 * 将 handleChange 方法传给 ThePagination组件
                 *
                 * @param params
                 */
                handleChange(params) { params = Object.assign(params, this.attribute.listForm); this.queryList(params); },
    
                /**
                 * 格式化列表日期
                 *
                 * @param row
                 * @param column
                 * @param cellValue
                 * @param index
                 * @returns {*|string}
                 */
                dateMoment(row, column, cellValue, index) {
                    if (!cellValue) {
                        return '';
                    }
                    return this.$moment(cellValue).format('YYYY-MM-DD hh:mm:ss');
                },
    
                /**
                 * 角色编辑跳转
                 *
                 * @param index
                 * @param row
                 */
                handleEdit(index, row) {
    
                    this.roleEditForm.id = row.id;
                    this.roleEditForm.operatorRoleName = row.operatorRoleName;
                    this.roleEditForm.initiateStatus = row.initiateStatus;
    
                    this.roleEditModal = true;
                },
    
                /**
                 * 配置权限
                 *
                 * @param index
                 * @param row
                 */
                handleConfig(index, row) {
                },
    
                /**
                 * 编辑角色关闭回调
                 */
                closeRoleEditModal() {
    
                    this.cancel('roleEditForm');
                },
    
                /**
                 * 取消编辑
                 *
                 * @param formName
                 */
                cancel(formName) {
    
                    this.$refs[formName].resetFields();
                    this.roleEditModal = false;
                },
    
                /**
                 * 提交
                 *
                 * @param formName
                 */
                submitForm(formName) {
    
                    this.$refs[formName].validate((valid) => {
                        if (!valid) {
                            return false;
                        }
    
                        RoleApi.editRole(this.roleEditForm).then((result) => {
    
                            if (result.data.status != '0000') {
                                this.$message.error(result.data.msg);
                                return false;
                            }
    
                            this.closeRoleEditModal();
                            this.$message.success('修改成功');
                            this.initTable();
                        })
                    });
                },
            },
            mounted() {
            }
        }
    </script>
    <style scoped>
    </style>