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>
<!-- 编辑角色modal -->
<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>
