<template>
    <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="name" label="姓名"  width="250" />
        <el-table-column prop="age" label="年齡" width="250" />
        <el-table-column prop="gender" label="性別" width="250" />
        <el-table-column prop="createTime" label="創(chuàng)建時間" width="250" />
        <el-table-column fixed="right" label="操作" width="250">
            <template #default>
                <el-button link type="primary" size="small">編輯</el-button>
                <el-button link type="primary" size="small">刪除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                tableData:[]
            }
        },
        created(){//為何 要在created 方法中 發(fā)請求，因為該方法 可以操作tableData屬性
            // 解決方法一
            axios.get('http://localhost:9090/student') // url 請求后臺的地址
                /*
                * .then(function (response) 這樣寫前端會報錯
                * 報錯信息：TypeError: Cannot set properties of undefined (setting 'tableData')at eval (Student.vue?401d:59:1)
                * 這樣寫是匿名函數(shù)，無法取到tableData的值，所以tableData的值為undefined，不能給undefined的變量賦值
                * 解決辦法：1.改為箭頭函數(shù) 2.將this重新賦值給新的變量
                */
                // .then(function (response) { //成功回調(diào)方法（訪問后臺成功，后臺有數(shù)據(jù)返回，則進入該方法）
                .then(response=> { //成功回調(diào)方法（訪問后臺成功，后臺有數(shù)據(jù)返回，則進入該方法）
                    console.log(response);
                    console.log(response.data)
                    this.tableData = response.data;
                })
                .catch(function (error) {//失敗回調(diào)方法（訪問后臺失敗，返回失敗的信息，則進入該方法）
                    console.log(error);
                });
        },
        methods:{
        }
    }
</script>

   //解決辦法二
        var th = this;
        axios.get('http://localhost:9090/student') // url 請求后臺的地址
            .then(function (response) { //成功回調(diào)方法（訪問后臺成功，后臺有數(shù)據(jù)返回，則進入該方法）
                console.log(response);
                console.log(response.data)
                th.tableData = response.data;
            })
            .catch(function (error) {//失敗回調(diào)方法（訪問后臺失敗，返回失敗的信息，則進入該方法）
                console.log(error);
            });