实战:四
作者:互联网
前端分页
基于Element-ui提供的组件完成分页功能
<el-pagination
:current-page="current" //当前页码
:page-size="limit" //每页数据量
:total="total" //总数据数
style="padding: 30px 0; text-align: center"
layout="total, prev, pager, next, jumper"
@current-change="getList" //哪个方法
/>
方法也略作修改
getList: function (page = 1) {
this.current = page;
hospSet
.getHospSetList(this.current, this.limit, this.searchObj)
.then((response) => {
this.list = response.data.records;
this.total = response.data.total;
})
.catch((response) => {
console.log(response);
});
}
前端多条件查询
基于Element-ui提供的组件完成多条件查询
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="searchObj.hosname" placeholder="医院名称" />
</el-form-item>
<el-form-item>
<el-input v-model="searchObj.hoscode" placeholder="医院编号" />
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getList()">
查询
</el-button>
</el-form>
数据的逻辑删除
基于Element-ui提供的组件完成数据的逻辑删除
添加按钮
<el-table-column label="操作" width="280" align="center">
<template slot-scope="scope">
<el-button type="danger" size="mini"
icon="el-icon-delete" @click="removeDataById(scope.row.id)"> </el-button>
</template>
</el-table-column>
在api中定义地址并编写方法
//api工具中
removeDataById(id){
return request({
url:`/admin/hosp/hospitalSet/${id}`,
method:"DELETE",
})
}
//编写实现方法
removeDataById: function (id) {
this.$confirm("此操作将永久删除医院设置信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
hospSet.removeDataById(id).then((response) => {
//提示删除成功
this.$message({
type: "success",
message: "删除成功!",
});
//刷新页面
this.getList(1);
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
实现批量删除
添加按钮
<!-- 工具条 -->
<div>
<el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
</div>
<!--用于获取选中id的方法-->
<el-table
:data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
<!--复选框-->
<el-table-column type="selection" width="55"/>
定义获取id的方法
//data
multipleSelection: []
//method
handleSelectionChange(selection) {
this.multipleSelection = selection
}
定义批量删除的方法
batchHospSet: function () {
this.$confirm("此操作将永久删除医院设置信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
//遍历multipleSelection获取id值
var idList = this.multipleSelection;
for (var i = 0; i < this.multipleSelection.length; i++) {
var obj = this.multipleSelection[i];
var id = obj.id;
idList.push(id);
}
hospSet.batchHospSet(idList).then((response) => {
//提示删除成功
this.$message({
type: "success",
message: "删除成功!",
});
//刷新页面
this.getList(1);
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
}
实现锁定和取消锁定
与删除类似
<el-table-column label="操作" width="280" align="center">
<template slot-scope="scope">
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeDataById(scope.row.id)"
>
</el-button>
<el-button
v-if="scope.row.status == 1"
type="primary"
size="mini"
icon="el-icon-delete"
@click="lockHostSet(scope.row.id, 0)"
>锁定</el-button
>
<el-button
v-if="scope.row.status == 0"
type="danger"
size="mini"
icon="el-icon-delete"
@click="lockHostSet(scope.row.id, 1)"
>取消锁定</el-button
>
</template>
</el-table-column>
实现同一个路由的渲染
问题:vue-router导航切换 时,如果两个路由都渲染同个组件,
组件的生命周期方法(created或者mounted)不会再被调用, 组件会被重用,显示上一个路由渲染出来的自建
解决方案:可以简单的在 router-view上加上一个唯一的key,来保证路由切换时都会重新触发生命周期方法,确保组件被重新初始化。
修改 src/views/layout/components/AppMain.vue 文件如下:
<router-view:key="key"></router-view>
computed: {
key() {//每次路由都会带上一个随机的值,以保证每次路由各不相同,每次都会执行生命周期函数。
returnthis.$route.name !== undefined? this.$route.name + +newDate(): this.$route + +newDate()
}
}
标签:实战,删除,multipleSelection,response,message,type,id 来源: https://www.cnblogs.com/Boerk/p/16151704.html