渲染

src/router/index.js

@@ -9,6 +9,7 @@ const routes = [
     { path: '/', component: index,meta:[{a:1},2,3] },
     { path: '/a/b/c/d', name: "user", component: user,meta:"user" },
 	{ path: '/axios', name: "user", component: axios,meta:"user" },
+	{ path: '/list', name: "user", component: ()=> import("../views/list.vue"),meta:"user" },
     {
         path: "/admin",meta:"admin", beforeEnter: (to, from, next) => {
             // ...

src/views/list.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <!-- 请求拿数据
+        验证成功不成功
+        赋值到data
+        vue会根据模板自动渲染 -->
+        <!-- 
+            填写 或 获取数据
+            验证填写或者获取的数据正确性
+            进行请求
+            验证后台是否提交成功
+            提示
+         -->
+        <!-- <p>{{list[0].mingcheng}}</p> -->
+        <!-- 1 电脑办公
+        2 手机数码
+        3 男装
+        4 女装 -->
+        <!-- <p v-for="item in list" :key="item._id">{{item.mingcheng}}-{{item.xiangqing}}-{{tihuan(item.fenlei)}}</p> -->
+         <el-table
+      :data="list"
+      style="width: 100%">
+      <el-table-column
+        prop="mingcheng"
+        label="商品名称"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="jiage"
+        label="商品价格"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        
+        label="商品分类">
+        <template slot-scope="scope">
+        <!-- {{tihuan(scope.row.fenlei)}} -->
+        <button @click="tijiao(scope.row._id)">删除</button>
+      </template>
+      </el-table-column>
+    </el-table>
+    </div>
+</template>
+<style scoped>
+
+</style>
+<script>
+export default {
+    data(){
+        return {
+            list:[]
+        }
+    },
+    mounted(){
+        this.axios({url:"https://kaoshi-shangpin.theluyuan.com/findshop"}).then((res)=>{
+            console.log(res.data)
+            if(res.data.code == 0 ){
+                this.list = res.data.data
+                console.log(this.list)
+            }else{
+                alert("请求失败")
+            }
+        })
+    },
+    methods:{
+        tihuan(i){
+            let text = "";
+            if(i == 1){
+                text = "电脑办公"
+            }else if(i==2){
+                text = "手机数码"
+            }else if(i==3){
+                text="男装"
+            }else{
+                text="女装"
+            }
+            return text;
+        },
+        tijiao(a){
+            console.log(a)
+        }
+    }
+}
+</script>