页面显示：
vue+axios+element
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>整合案例01</title> <script src="js/vue.js"></script> <script src="js/axios-0.18.0.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style> </head> <body> <div id="app"> <el-container style="height: 700px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message">信息管理系统</i></template> <el-menu-item-group> <!-- <template slot="title">分组一</template> --> <el-menu-item index="1-1">部门管理</el-menu-item> <el-menu-item index="1-2">员工管理</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <!-- 表单查询 --> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="姓名"> <el-input v-model="formInline.name" placeholder="姓名"></el-input> </el-form-item> <el-form-item label="性别"> <el-select v-model="formInline.gender" placeholder="性别"> <el-option label="男" value="1"></el-option> <el-option label="女" value="0"></el-option> </el-select> </el-form-item> <el-form-item label="入职日期"> <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> </el-form> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column label="图片" width="180"> <template slot-scope="scope"> <img :src="scope.row.image" width="80px"> </template> </el-table-column> <el-table-column label="性别" > <template slot-scope="scope"> {{scope.row.gender == 1? "男":"女"}} </template> </el-table-column> <el-table-column prop="job" label="职位" > </el-table-column> <el-table-column prop="entrydate" label="入职日期" > </el-table-column> <el-table-column prop="updatetime" label="修改时间" > </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </el-main> </el-container> </el-container> </div> </body> <script> new Vue({ el: "#app", data: { formInline: { name: '', gender: '' }, tableData: [{ id: "1", name: "小明", image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg", gender: 1, job: '班主任', entrydate: "2021-09-09", updatetime:"2021-10-09" }] }, methods: { onSubmit() { } }, mounted(){ axios.get("https://mock.apifox.cn/m1/2954513-0-default/emp/list").then(result=>{ // console.log(result.data.data); this.tableData = result.data.data; }) } }) </script> </html>