说明

创建 views/leave/list.vue 文件，该页面显示 请假列表信息，如下图：

代码

<template>
    <div id="app">
    <button @click="qingjia">申请请假</button>
    &nbsp;&nbsp;&nbsp;&nbsp;

    申请人：<input type="text" v-model="applicant" > <button @click="search">查询</button>

        <table border="1">
            <tr>
                <td>请假类型</td>
                <td>开始时间</td>
                <td>结束时间</td>
                <td>请假人</td>
                <td>提交时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in leaves" :key="item.l_id">
                <td>{{item.l_type_text}}</td>
                <td>{{item.start_date}}</td>
                <td>{{item.end_date}}</td>
                <td>{{item.real_name}}</td>
                <td>{{item.create_time}}</td>
                <td>
                    <button @click="showById(item.l_id)">修改</button>
                &nbsp;&nbsp;
                    <button @click="del(item.l_id)">删除</button></td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    data: function(){
        return { //是vue的配置，表示数据
            leaves: [],
            applicant:""
        }
    },
    methods:{
        del(id){ //简写
            var b=confirm("您确定要删除该条记录吗？")
            if(!b){
                return;
            }
            console.log("点击删除按钮，id是："+id)

            this.$axios.get('delLeave?id='+id, {
                })
                .then( res => {
                    console.log("删除结果：",res.data);
                    if(res.data.code===0){//删除成功
                        this.search()
                    }
                })
                .catch(function (error) {// 请求失败处理
                    console.log(error);
            });

        },
        qingjia:function(){
            this.$router.push("/leave/add")
        },
        search:function(){
            console.log("点击查询按钮",this.applicant)

            let params = new URLSearchParams();
            params.append("leaveUser", this.applicant);

            var that = this
            this.$axios.post('leaveList', params)
                .then(function (res) {
                    console.log(res.data);
                    // 在 axios 中，要访问 vue的leaves
                    // 在 axios 中，获取不到 vue对象，为了解决这个问题，就有了 var that = this
                    // 为什么 不这么写：  this.leaves，因为  在 axios块中，this表示axios
                    that.leaves=res.data.data
                })
                .catch(function (error) {// 请求失败处理
                    console.log(error);
            });

        },
        showById:function(id){
            console.log("id:",id)
            //通过url传参数
            // location.href="leaveDetail.html?id="+id
            this.$router.push({
                path:"/leave/detail",
                query: { // query 传参数
                    id: id
                }
                })
        }
    },
    mounted:function(){ // vue挂载完成后，发送ajax请求
        this.search() // 挂载vue之后，显示数据之前，调用 search()
    }
}
</script>

原文出处：/show_1IX2orxERoNO.html