代码如下(示例):
import request from '@/utils/request'
export function getAllInfo(tableName) {
return request({
url:'/demo/'+tableName,
method:'post',
})
}
export function selectDemo(query) {
return request({
url:'/demo/list',
method:'get',
params: query
})
}
export function selectName(name) {
return request({
url:'/demo/'+name,
method:'get',
})
}
export function insertStudent(demo) {
return request({
url: '/demo/list',
method: 'post',
data: demo
})
}
export function deleteStudent(id) {
return request({
url: '/demo/'+id,
method: 'delete',
})
}
export function updateStudent(demo) {
return request({
url: '/demo/list',
method: 'put',
data: demo
})
}
代码如下(示例):
<template>
<div class="demo">
<div style="margin-top: 8px;width:60%;height: 100%;">
<el-table
:data="list"
border
style="width: 100%">
<el-table-column
label="ID"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.id }}span>
template>
el-table-column>
<el-table-column
label="name"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.name }}span>
template>
el-table-column>
<el-table-column
label="age"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.age }}span>
template>
el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除el-button>
template>
el-table-column>
el-table>
<el-dialog
:visible.sync="centerDialogVisible"
width="50%">
<el-form ref="changeForm" :model="changeForm" :rules="rules" label-width="80px">
<el-form-item label="name">
<el-input v-model="changeForm.name">el-input>
el-form-item>
<el-form-item label="age">
<el-input v-model="changeForm.age">el-input>
el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm1('changeForm')">提交el-button>
el-form-item>
el-form>
el-dialog>
div>
<div>
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="name">
<el-input v-model="searchForm.name" placeholder="name">el-input>
el-form-item>
<el-form-item>
<el-button type="primary" @click="searched(searchForm.name)">查询el-button>
el-form-item>
el-form>
<el-table :data="search" border style="width: 100%">
<el-table-column
label="ID"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.id }}span>
template>
el-table-column>
<el-table-column
label="name"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.name }}span>
template>
el-table-column>
<el-table-column
label="age"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.age }}span>
template>
el-table-column>
el-table>
div>
div>
template>
<script>
import {selectName, selectDemo, updateStudent} from "@/api/demo/index.js";
import {deleteStudent} from "@/api/demo/index.js";
export default {
name: "Demo",
data(){
var id = (rule, value, callback) => {
if (value === '') {
callback(new Error(' '));
} else if (!Number.isInteger(value)) {
callback(new Error(' '));
} else {
callback();
}
};
var name = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入姓名'));
} else {
callback();
}
};
var age = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入年龄'));
} else if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
callback();
}
};
return{
user:{
id:undefined,
name:undefined,
age:undefined
},
list:[],
centerDialogVisible: false,
changeForm: {
id:'',
name: '',
age: ''
},
rules: {
inid: [
{ validator: id, trigger: 'blur' }
],
inname: [
{ validator: name, trigger: 'blur' }
],
inage: [
{ validator: age, trigger: 'blur' }
]
},
searchForm: {
name:''
},
search:[]
}
},
methods:{
//查询
getInfo() {
selectDemo().then((response) => {
this.list = response;
console.info(response);
}).catch((error) => {
console.info(error);
});
},
searched(name){
console.log(name);
selectName(name).then((response) => {
this.search = response;
}).catch((error) => {
console.info(error);
});
},
//修改
submitForm1(formName) {
this.centerDialogVisible = false;
const _this=this;
console.log(_this.changeForm);
//检查表达式
this.$refs[formName].validate((valid) => {
if (valid) {
updateStudent(_this.changeForm).then(response => {
this.msgSuccess("修改成功");
});
//数据错误
} else {
console.log('error submit!!');
return false;
}
});
},
handleEdit(index, row) {
this.centerDialogVisible = true
this.changeForm=row;
console.log(this.changeForm);
},
//删除
handleDelete(index,row) {
this.$confirm('是否确认删除名称为"' + row.id+row.name + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return deleteStudent(row.id);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(() => {});
},
//重置表单
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
//初始
created() {
this.getInfo();
},
}
script>
<style scoped>
.demo {
display: flex;
flex-direction: row;
}
style>