vue分页

template div classdashboard-container div classcontainer div classtableBar styledisplay: inline-block; width: 100% label stylemargin-right: 10px分类名称/label el-input v-modelname placeholder请填写分类名称 stylewidth: 15% clearable clearinit keyup.enter.nativeinit / label stylemargin-right: 5px; margin-left: 20px分类类型/label el-select v-modelcategoryType placeholder请选择 clearable stylewidth: 15% clearinit el-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value / /el-select div stylefloat: right el-button typeprimary classcontinue clickaddClass(class) 新增菜品分类 /el-button el-button typeprimary stylemargin-left:20px clickaddClass(meal) 新增套餐分类 /el-button /div el-button classnormal-btn continue clickinit(true) 查询 /el-button /div el-table v-iftableData.length :datatableData stripe classtableBox el-table-column propname label分类名称 / el-table-column proptype label分类类型 template slot-scopescope span{{ scope.row.type 1 ? 菜品分类 : 套餐分类 }}/span /template /el-table-column el-table-column propsort label排序 / el-table-column label状态 template slot-scopescope div classtableColumn-status :class{ stop-use: String(scope.row.status) 0 } {{ String(scope.row.status) 0 ? 禁用 : 启用 }} /div /template /el-table-column el-table-column propupdateTime label操作时间 / el-table-column label操作 width200 aligncenter template slot-scopescope el-button typetext sizesmall classblueBug clickeditHandle(scope.row) 修改 /el-button el-button typetext sizesmall classdelBut clickdeleteHandle(scope.row.id) 删除 /el-button el-button typetext sizesmall classnon :class{ blueBug: scope.row.status 0, delBut: scope.row.status ! 0 } clickstatusHandle(scope.row) {{ scope.row.status 1 ? 禁用 : 启用 }} /el-button /template /el-table-column /el-table Empty v-else :is-searchisSearch / el-pagination v-ifcounts 10 classpageList :page-sizes[10, 20, 30, 40] :page-sizepageSize layouttotal, sizes, prev, pager, next, jumper :totalcounts size-changehandleSizeChange current-changehandleCurrentChange / /div el-dialog :titleclassData.title :visible.syncclassData.dialogVisible width30% :before-closehandleClose el-form refclassData :modelclassData classdemo-form-inline :rulesrules label-width100px el-form-item label分类名称 propname el-input v-modelclassData.name placeholder请输入分类名称 maxlength20 / /el-form-item el-form-item label排序 propsort el-input v-modelclassData.sort placeholder请输入排序 / /el-form-item /el-form span slotfooter classdialog-footer el-button sizemedium click ;(classData.dialogVisible false), $refs.classData.resetFields() 取 消/el-button el-button typeprimary :class{ continue: actionType add } sizemedium clicksubmitForm()确 定/el-button el-button v-ifaction ! edit typeprimary sizemedium clicksubmitForm(go) 保存并继续添加 /el-button /span /el-dialog /div /template script langts import { Component, Vue } from vue-property-decorator import HeadLable from /components/HeadLable/index.vue import { getCategoryPage, deleCategory, editCategory, addCategory, enableOrDisableEmployee } from /api/category import Empty from /components/Empty/index.vue Component({ name: Category, components: { HeadLable, Empty } }) export default class extends Vue { private options: any [ { value: 1, label: 菜品分类 }, { value: 2, label: 套餐分类 } ] private actionType: string private id private status private categoryType: number null private name: string private action: string private counts: number 0 private page: number 1 private pageSize: number 10 private tableData [] private type private isSearch: boolean false private classData: any { title: 添加菜品分类, dialogVisible: false, categoryId: , name: , sort: } get rules() { return { name: [ { required: true, trigger: blur, validator: (rule: any, value: string, callback: Function) { // const reg /[\u4e00-\u9fa5]/ var reg new RegExp(^[A-Za-z\u4e00-\u9fa5]$) if (!value) { callback(new Error(this.classData.title 不能为空)) } else if (value.length 2) { callback(new Error(分类名称输入不符请输入2-20个字符)) } else if (!reg.test(value)) { callback(new Error(分类名称包含特殊字符)) } else { callback() } } } ], sort: [ { required: true, trigger: blur, validator: (rule: any, value: string, callback: Function) { if (value || String(value) 0) { const reg /^\d$/ if (!reg.test(value)) { callback(new Error(排序只能输入数字类型)) } else if (Number(value) 99) { callback(new Error(排序只能输入0-99数字)) } else { callback() } } else { callback(new Error(排序不能为空)) } } } ] } } created() { this.init() } // 初始化信息 private async init(isSearch?) { this.isSearch isSearch await getCategoryPage({ page: this.page, pageSize: this.pageSize, name: this.name ? this.name : undefined, type: this.categoryType ? this.categoryType : undefined }) .then(res { if (String(res.data.code) 1) { this.tableData res res.data res.data.data res.data.data.records this.counts Number(res.data.data.total) } else { this.$message.error(res.data.desc) } }) .catch(err { console.log(err, err) this.$message.error(请求出错了 err.message) }) } // 添加 private addClass(st: any) { if (st class) { this.classData.title 新增菜品分类 this.type 1 } else { this.classData.title 新增套餐分类 this.type 2 } this.action add this.classData.name this.classData.sort this.classData.dialogVisible true this.actionType add } // 修改 private editHandle(dat: any) { this.classData.title 修改分类 this.action edit this.classData.name dat.name this.classData.sort dat.sort this.classData.id dat.id this.classData.dialogVisible true this.actionType edit } // 关闭弹窗 private handleClose(st: string) { console.log(this.$refs.classData, this.$refs.classData) this.classData.dialogVisible false //对该表单项进行重置将其值重置为初始值并移除校验结果 this.$refs.classData.resetFields() } //状态修改 private statusHandle(row: any) { this.id row.id this.status row.status this.$confirm(确认调整该分类的状态?, 提示, { confirmButtonText: 确定, cancelButtonText: 取消, type: warning, customClass: customClass }).then(() { enableOrDisableEmployee({ id: this.id, status: !this.status ? 1 : 0 }) .then(res { if (String(res.status) 200) { this.$message.success(分类状态更改成功) this.init() } }) .catch(err { this.$message.error(请求出错了 err.message) }) }) } //删除 private deleteHandle(id: any) { this.$confirm(此操作将永久删除该分类是否继续, 确定删除, { confirmButtonText: 删除, cancelButtonText: 取消, type: warning }).then(() { deleCategory(id) .then(res { if (res.data.code 1) { this.$message.success(删除成功) this.init() } else { this.$message.error(res.data.msg) } }) .catch(err { this.$message.error(请求出错了 err.message) }) }) } $refs!: { classData: any } //数据提交 submitForm(st: any) { if (this.action add) { this.$refs.classData.validate((value: boolean) { if (value) { addCategory({ name: this.classData.name, type: this.type, sort: this.classData.sort }) .then(res { if (res.data.code 1) { this.$message.success(分类添加成功) this.$refs.classData.resetFields() if (!st) { this.classData.dialogVisible false } this.init() } else { this.$message.error(res.data.desc || res.data.msg) } }) .catch(err { this.$message.error(请求出错了 err.message) }) } }) } else { this.$refs.classData.validate((value: boolean) { if (value) { editCategory({ id: this.classData.id, name: this.classData.name, sort: this.classData.sort }) .then(res { if (res.data.code 1) { this.$message.success(分类修改成功) this.classData.dialogVisible false this.$refs.classData.resetFields() this.init() } else { this.$message.error(res.data.desc || res.data.msg) } }) .catch(err { this.$message.error(请求出错了 err.message) }) } }) } } //分页 private handleSizeChange(val: any) { this.pageSize val this.init() } private handleCurrentChange(val: any) { this.page val this.init() } }