記錄1：vue請求后台接口，展示表格數據

一：設置請求接口配置

//request.js
import axios from 'axios';

const service = axios.create({
    // process.env.NODE_ENV === 'development' 來判斷是否開發環境
    // easy-mock服務掛了，暫時不使用了
    // baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
    timeout: 5000
});

service.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

service.interceptors.response.use(
    response => {
        console.log(response)
        if (response.data.code === 20000) {
            return response.data.data;
        } else {
            Promise.reject();
        }
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

export default service;

//index.js 包裝請求動作
import request from '../utils/request';

/* export const fetchData = query => {
    return request({
        url: './table.json',
        method: 'get',
        params: query
    });
}; */
export const fetchData = query => {
    return request({
        url: 'http://localhost:8080/fruitsaleapi/shopProductController/getList',
        method: 'post',
        params: query  //頁面參數
    });
};

下面是頁面代碼

<el-table
                :data="tableData" //綁定動態數據屬性
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>//對應動態數據屬性里的字段 》 prop
                <el-table-column prop="buhege" label="用戶名"></el-table-column>
                <el-table-column label="賬戶余額">
                    <template slot-scope="scope">￥{{scope.row.date}}</template> //可以自己設置展示內容，不使用prop
                </el-table-column>
                <el-table-column label="頭像(查看大圖)" align="center">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.thumb"
                            :preview-src-list="[scope.row.thumb]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="hege" label="地址"></el-table-column>
                <el-table-column label="狀態" align="center">
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.state==='成功'?'success':(scope.row.state==='失敗'?'danger':'')"
                        >{{scope.row.state}}</el-tag>
                    </template>
                </el-table-column>
                
                <el-table-column prop="date" label="注冊時間"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >編輯</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>

//定義屬性以及query請求后台接口的參數對象
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                brandid: 1,
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1
        };
    },

調用：

created() {
        this.getData();
    },
    methods: {
        // 獲取 easy-mock 的模擬數據
        getData() {
            fetchData(this.query).then(res => {
                console.log(res);
                this.tableData = res;
                console.log(this.tableData)
                this.pageTotal = res.length || 50;
            });
        },