element ui 分页增删改查_成功element ui增删改查1

列表页面：

查询

新增

:data="userInfoList.slice((currentPage-1) *pageSize,currentPage*pageSize)"

style="width: 100%"

>

查看详情

修改

删除

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

:page-sizes="[5,10,100]"

:page-size="pageSize"

:total="userInfoList.length"

@current-change="handleCurrentChange"

@size-change="handleSizeChange"

style="text-align: center;margin-top: 1%;"

>

:model="addFormData"

:rules="rules2"

ref="addFormData"

label-width="0px"

class="demo-ruleForm login-container"

>

type="text"

v-model="addFormData.username"

auto-complete="off"

placeholder="用户名"

>

确定添加

importaxiosfrom"axios";

importqsfrom"qs";

import{toJSONSchema}from"mockjs";

exportdefault{

data() {

return{

userInfoList:[],

addFormReadOnly:true,

dialogVisible:false,

isView:true,

addFormData:{

username:"",

},

pageSize:5,

currentPage:1,

usernamef:"",

rules2:{

username:[

{

required:true,

message:"用户名不能为空",

trigger:"blur",

},

],

},

};

},

mounted:function() {

this.loadData();

},

methods:{

loadData() {

letparam= {username:this.usernamef};

// axios.get("http://localhost:12345/api/test/Gettest2?username="+this.usernamef).then((result) => {

axios

.get("http://localhost:12345/api/test/Gettest2?"+qs.stringify(param))

.then((result)=>{

var_data=result.data.data;

this.userInfoList=_data;

});

},

handleCurrentChange:function(cpage) {

this.$data.currentPage=cpage;

},

handleSizeChange:function(psize) {

this.$data.pageSize=psize;

},

modifyuser(rowData) {

this.$router.push("/edit1?id="+rowData.id);

},

getUsers() {

this.loadData();

},

addUser() {

this.addFormData= {

username:"",

};

this.isView=true;

this.dialogVisible=true;

//    this.addFormReadOnly = false;

},

checkDetail(rowData) {

this.$router.push("/detail1?id="+rowData.id);

},

deleteUser(rowData) {

this.$alert("是否删除这条记录","信息删除", {

confirmButtonText:"确定",

callback:(action)=>{

varparams= {

id:rowData.id,

};

axios

.delete(

"http://localhost:12345/api/test/Delete?"+qs.stringify(params)

)

.then((result)=>{

console.info(result);

if(result.data.isSuccess) {

this.$message({

type:"info",

message:`已删除`,

});

}else{

this.$message({

type:"info",

message:`删除失败`,

});

}

this.loadData();

});

},

});

},

//增加一条记录

addSubmit() {

//先判断表单是否通过了判断

this.$refs.addFormData.validate((valid)=>{

//代表通过验证,将参数传回后台

if(valid) {

letparam=Object.assign({},this.addFormData);

// var mm=JSON.stringify(param);

// alert(mm);

alert(JSON.stringify(param));

varmm=JSON.stringify(param);

axios

.post("http://localhost:12345/api/test/Add",mm)

.then((result)=>{

//axios.post("http://localhost:12345/api/test/Add", {"username":this.addFormData.username}).then((result) => {

if(result.data.success) {

this.$message({

type:"info",

message:"添加成功",

});

this.loadData();

}else{

this.$message({

type:"info",

message:"添加失败",

});

}

this.dialogVisible=false;

});

}

});

},

},

};

body{

background:#dfe9fb;

}

修改页面：

:model="form"

:rules="rules2"

ref="form"

label-width="80px"

class="demo-ruleForm login-container"

>

确定修改