vue+element-ui中獲取頁面數據

https://blog.csdn.net/weixin_36706903/article/details/81706857

頁面展現：

數據庫字段名：

 

跨域：

config裏的index文件裏的dev裏面的proxyTable裏面添加本身的後臺端口，這樣就能很方便的請求後臺數據了

'/api':{

target:'http://localhost:9987',

changeOrigin:true,

pathRewrite:{

'/api':''

}

<template>
 	<el-table :data="packData" border style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="PackingId" label="包裝編號"  width="120">//prop裏的值是數據庫表裏的對應字段名
                </el-table-column>
                <el-table-column prop="PackingName" label="包裝名稱" width="120">
                </el-table-column>
                <el-table-column prop="PackingPrice" label="包裝價格" width="120">
                </el-table-column>
                <el-table-column prop="PackingImage" label="包裝圖片">
                </el-table-column>
            </el-table>
</template>

</script>
export default {
        name: 'pack',
        data() {
            return {
                packData:[],//主題數據
 
}}
methods：{
// 獲取 包裝數據，由於搜索後分頁數據會變化，因此這裏能夠傳值到後臺判斷是否進行了搜索展現，這裏只作簡單展現，不考慮搜索和分頁
            getPackData() {
//我用的api代理
                this.$axios.post('/api/selectPackPageMade.do').then((res) => {
                    this.packData = res.data;//把傳回來數據賦給packData
                }).catch(function(error){
                    console.log(error);
                })
            },}
}
</script>