element 分页 get 和post 传参

向右看齐 2022-11-07 13:16 188阅读 0赞

export const getRoleEdit = params => put('/api-user/roles', params);

export const getRole = (params) => get(\`/api-user/listRoles?pageNum=$\{params.pageNum\}&&pageSize=$\{params.pageSize\}&&name=$\{params.name\}\`);

<div class="content\_bg">

<div class="content">

<el-form :inline="true" :model="formInline" class="demo-form-inline">

<el-form-item label="角色名：">

<el-input v-model="formInline.user" placeholder="角色名"></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" icon="el-icon-search" @click="handerSearch">搜索</el-button>

</el-form-item>

<el-form-item style="float: right">

<el-button type="primary" icon="el-icon-circle-plus-outline" @click="handerAdd">添加</el-button>

</el-form-item>

</el-form>

<el-table :data="tableData" border style="width: 100%" row-key="id">

<el-table-column prop="code" label="code" align="center"> </el-table-column>

<el-table-column prop="name" label="角色名" align="center"> </el-table-column>

<el-table-column prop="updateTime" label="修改时间" align="center"> </el-table-column>

<el-table-column fixed="right" label="操作" width="300" align="center">

<template slot-scope="scope">

<el-button @click="handleEdit(scope.row)" type="primary" size="small" :disabled="scope.row.id == 1"><i class="el-icon-edit"></i></el-button>

<el-button @click="handleDelete(scope.row)" type="primary" size="small" :disabled="scope.row.id == 1"><i class="el-icon-delete"></i></el-button>

<el-button type="primary" size="small" :disabled="scope.row.id == 1">分配权限</el-button>

</template>

</el-table-column>

</el-table>

<div style="margin-top: 30px;float: right;">

<el-pagination

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="pageNum"

:page-sizes="\[1, 2, 30, 40\]"

:page-size="pageSize"

layout="total, sizes, prev, pager, next, jumper"

:total="total">

</el-pagination>

</div>

<el-dialog :title="flagName ? '添加' : '编辑'" :visible.sync="centerDialogVisible" width="50%" center>

<el-form label-position="top" label-width="80px" :model="formLabelAlign">

<el-form-item label="code(不能修改)" v-if="flagName">

<el-input v-model="formLabelAlign.code"></el-input>

</el-form-item>

<el-form-item label="code" v-else>

<el-input v-model="formLabelAlign.code" disabled></el-input>

</el-form-item>

<el-form-item label="角色">

<el-input v-model="formLabelAlign.name"></el-input>

</el-form-item>

</el-form>

<span slot="footer" class="dialog-footer">

<el-button @click="centerDialogVisible = false">返回</el-button>

<el-button type="primary" @click="handerAddSave" v-if="flagName">保存</el-button>

<el-button type="primary" @click="handerEditSave" v-else>保存</el-button>

</span>

</el-dialog>

</div>

</template>

import \{ getRole, getRoleEdit, getRoleAdd, getRoleDelete \} from '@/api/index';

export default \{

methods: \{

handleClick(row) \{

console.log(row);

\},

data() \{

return \{

pageNum: 1,

pageSize: 10,

total: 0,

formInline: \{

user: ''

\},

flagName: false,

centerDialogVisible: false,

formLabelAlign: \{

name: '',

code: ''

\},

tableData: \[\]

\};

\},

created() \{

this.getRoleList(\{\});

\},

methods: \{

handleSizeChange(val) \{

console.log(\`每页 $\{val\} 条\`);

this.pageSize = val;

this.getRoleList();

\},

handleCurrentChange(val) \{

console.log(\`当前页: $\{val\}\`);

this.pageNum = val;

this.getRoleList();

\},

// 查询

getRoleList() \{

let params = \{

pageNum: this.pageNum,

pageSize: this.pageSize,

name: this.formInline.user

getRole(params).then(res => \{

if (res.status == 200) \{

this.tableData = res.data.data.list;

this.total = res.data.data.total;

this.pageNum = res.data.data.pageNum;

this.pageSize = res.data.data.pageSize;

\});

\},

// 搜索

handerSearch() \{

this.getRoleList(this.formInline.name);

\},

// 添加

handerAdd() \{

this.formLabelAlign = \{\};

this.flagName = true;

this.centerDialogVisible = true;

\},

// 编辑

handleEdit(row) \{

console.log(111, row);

this.flagName = false;

this.centerDialogVisible = true;

this.formLabelAlign = row;

\},

// 添加保存

handerAddSave() \{

getRoleAdd(this.formLabelAlign).then(res => \{

this.centerDialogVisible = false;

this.getRoleList();

this.$message.success('添加成功');

\});

\},

// 编辑保存

handerEditSave() \{

getRoleEdit(this.formLabelAlign).then(res => \{

this.centerDialogVisible = false;

this.getRoleList();

this.$message.success('修改成功');

\});

\},

handleDelete(row) \{

this.$confirm('确定要删除吗?', '信息', \{

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

\})

.then(() => \{

getRoleDelete(row.id).then(res => \{

this.getRoleList();

this.$message(\{

type: 'success',

message: '删除成功!'

\});

\})

.catch(() => \{

this.$message(\{

type: 'info',

message: '已取消删除'

\});

\};

</script>

element 分页 get 和post 传参

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue中的路由传参(params和query)相当于（post和get传参）

相关 Postman的使用之get和post传参

相关 get/post请求传参长度有什么特点

相关 element 分页 get 和post 传参

相关 element分页

相关 thinkphp中post查询传参分页处理

相关如何调用http接口通过get()/post()方法传参

相关 vue 分页组件及props传参

相关调用http接口通过get()/post()方法传参

相关 thinkphp5.0分页和传参