实战：四

前端分页

基于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