目标
- 修改
- 删除
修改
选定table表格-自定义列模板中的修改删除功能
image.png
1、拷贝代码到页面FindAllConType.vue
<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>
methods里新增加如下两个方法
methods: {
。。。。
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
。。。。
}
改造修改方法
handleEdit(index, row) {
//alert(row.id);
this.router.push({
path:'/updateConType',
query:response.data
})
})
}
编写修改页面UpdateConType.vue
该页获取上一面传过来的数据用 this.$route.query.字段名
在添加页基础上进行微调，把id带到后台，前台不可编辑
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
<el-form-item label="id" prop="id">
<el-input v-model="ruleForm.id" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="常数类别编码" prop="constantTypeCode">
<el-input v-model="ruleForm.constantTypeCode"></el-input>
</el-form-item>
<el-form-item label="常数类别名称" prop="constantTypeName">
<el-input v-model="ruleForm.constantTypeName"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
id:this.$route.query.id,
constantTypeCode: this.$route.query.constantTypeCode,
constantTypeName: this.$route.query.constantTypeName
},
rules: {
constantTypeCode: [
{ required: true, message: '请输入常数类别编码', trigger: 'blur' },
{ min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur' }
],
constantTypeName: [
{ required: true, message: '请输入常数类别名称', trigger: 'blur' },
{ min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//如果验证通过，向后台请求添加
this.$axios.post('http://localhost:8082/sys/constanttype/add',this.ruleForm,{headers: {
'Content-Type': 'application/json;charset=UTF-8'
}})
.then(response=>{
let code=response.data.code;
if(code=='0'){
alert('修改成功')
//回到列表页
this.$router.push({path:'/findAllConType'})
}else{
//失败，打印错误原因
alert(response.data.msg)
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
为修改配置路由
{
path:'/updateConType',
name:'UpdateConType',
component:UpdateConType
}
编写后台修改方法
待完成....
单条删除由学生自行完成
批量删除关键代码
1页面部分
handleSelectionChange(val) {
var $this=this;
//每次要清空
this.multipleSelection=[];
val.forEach(item => {
//alert(item.id);
$this.multipleSelection.push(item.id);
})
//alert(this.multipleSelection.toString())
}
methods里新增加：
delBatch() {
alert("批量删除" + this.multipleSelection.toString());
this.$axios.get('http://localhost:8082/sys/constanttype/delBatch?ids=' +this.multipleSelection.toString())
.then(response => {
//alert(response.data.msg);
this.findAll();
})
.catch(error => {
alert(error);
})
}
2、后台ConstantTypeController
@RequestMapping("delBatch")
public ResponseBean delBatch(String ids){
ResponseBean result=new ResponseBean();
//System.out.println(ids);
int i= constantTypeServiceImpl.delBatch(ids);
if(i>0){
result.setCode("0");
result.setMsg("操作成功");
}else{
result.setCode("-1");
result.setMsg("操作失败");
}
return result;
}
3、后台ConstantTypeRepository
@Transactional
@Modifying
@Query(value="UPDATE Constanttype SET DelMark=0 where ID in ?1",nativeQuery=true)
int delBatch(String[] ids);
完整页面代码（参考）
<template>
<div>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<div id="btu" style="margin-top: -20px">
<el-button @click="add" type="danger">添加</el-button>
<el-button @click="delBatch" type="danger">批量删除</el-button>
</div>
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="常数类别编码" width="120">
<template slot-scope="scope">{{ scope.row.constantTypeCode }}</template>
</el-table-column>
<el-table-column prop="constantTypeName" label="常数类别名称" width="120">
</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-pagination background layout="prev, pager, next" @current-change="changePage" :page-size="pageSize" :total="total">
</el-pagination>
<div id="btu" >
<el-button @click="add" type="danger">添加</el-button>
<el-button @click="delBatch" type="danger">批量删除</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 5,
total: 0,
multipleSelection: []
}
},
mounted() {
this.findAll();
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
var $this = this;
//每次要清空
this.multipleSelection = [];
val.forEach(item => {
//alert(item.id);
$this.multipleSelection.push(item.id);
})
//alert(this.multipleSelection.toString())
},
findAll() {
//用axios请求后台，查询所有数据
this.$axios.get('http://localhost:8082/sys/constanttype/findAll', {
params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}
})
.then(response => {
//如果响应成功，把列表数据放到tableData里
//alert(response);
this.tableData = response.data.content;
this.total = response.data.totalElements;
//this.pagerCount = response.data.totalPages;
})
},
changePage: function(currentPage) {
//alert("下一页");
//更新当前页页码
this.currentPage = currentPage;
//再重新请求后台
this.findAll();
},
handleEdit(index, row) {
//alert(row.id);
this.$axios.get("http://localhost:8082/sys/constanttype/findById?id=" + row.id)
.then(response => {
//alert(response.data);
this.$router.push({
path: '/updateConType',
query: response.data
})
})
},
handleDelete(index, row) {
alert(row);
},
delBatch() {
alert("批量删除" + this.multipleSelection.toString());
this.$axios.get('http://localhost:8082/sys/constanttype/delBatch?ids=' + this.multipleSelection.toString())
.then(response => {
//alert(response.data.msg);
this.findAll();
})
.catch(error => {
alert(error);
})
},
add(){
this.$router.push({
path: '/constantAdd'
})
}
}
}
</script>
<style>
.has-gutter {
line-height: 20px;
}
.el-pagination.is-background {
height: 0px;
}
</style>
网友评论