Vue——get调用后端接口并将数据回显到table中

get调用

呈现效果（动态获取后台数据）

1.HTML

< template>

<el-table :data="tableData"> //这里的tableData在2.script -> export default -> data -> return 中定义
            <el-table-column prop="taskName" label="项目名称">
            </el-table-column>
            
            <el-table-column prop="taskType" label="项目类型">
            </el-table-column>
            
            <el-table-column prop="taskState" label="训练状态">
                <template slot-scope="tableData">
                    <el-tag v-if="tableData.row.taskState==1">运行成功</el-tag>
                    <el-tag v-if="tableData.row.taskState==0">未开始</el-tag>
                    <el-tag v-if="tableData.row.taskState==2">运行中</el-tag>
                    <el-tag v-if="tableData.row.taskState==-1">运行失败</el-tag>
                </template>
            </el-table-column>
            
            <el-table-column prop="moduleDataSet" label="数据源">
            </el-table-column>
            
            <el-table-column prop="taskTime" label="创建时间">
            </el-table-column>
            
            <el-table-column prop="taskDescribe" label="描述">
                <template slot-scope="tableData">
                    <el-tag v-if="tableData.row.taskDescribe!=null || tableData.row.taskDescribe!=''" style="none">
                        {{tableData.row.taskDescribe}}
                    </el-tag>
                </template>
            </el-table-column>
            
            <el-table-column label="操作" align="center">
                <template slot-scope="tableData">
                    <el-tag style="none;color:#2A8EEC" @click="deleteTask(tableData.$index,tableData.row.taskId)">移除
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>

2.script

data

return {
        tableData: [],  //先置空，下面会用this.tableData来调用，将从后端获取到的数据放入其中
       }

methods

后端所需参数: ‘‘userId’’

            // 获取项目数据
            getAllProData() {
            	// 第一步,准备参数.    
            	// 之前的登录已经将后端返回的userId保存到sessionStorage中,此处直接获取即可
                let userId = sessionStorage.getItem('userId')
                // 第二步,调用接口.
                // depot为封装好的axios,这里直接用$调用即可
                this.$depot.get({
                    url: '/getTableData ',	// 后端提供的接口
                    config:{		// 前端向后端传递的参数，如果不传参的话，将config包括括号内全部删掉即可
                        params:{
                        	// 这里参数只有userId,第一个userId是后端需要的字段,冒号后面的userId是我们第一步中准备好的参数
                            userId:userId	
                        }
                    },
                    // 对返回值进行处,res为调用接口成功后后端返回给前端的数据
                    cb: (res) => {
                    	// 我习惯在此处先console.log(res),将res打印出来,看看格式再对数据进行处理
                    	console.log(res)
                    	// 对后端返回的数据进行处理,将res中的data加载进tableData中
                    	// 需用this.调用return中的tableData 
                        this.tableData = res.data;
                    }
                })
            },