门票分类管理

根据接口返回的数据，分析需要展示什么

{
    "success":true,
    "message":"查询成功",
    "rows":[{
         "Id":1,
         "Name":"旅游",
         "Src":"/public/1.jpg",
         "SrotNum":100,
         "Enable":1
     }]
}

我们要做表格显示这些数据

建表

category.vue 门票分类管理：

<template>
  <div>
    <basic-toolbar></basic-toolbar>
    <category-table></category-table>
  </div>
</template>
<script>
import basicToolbar from "./common/basicToolbar";
import categoryTable from "./category/categoryTable";
export default {
  components: {
    basicToolbar,
    categoryTable
  }
};
</script>

categoryTable.vue

<template>
  <div>
    <el-table :data="list" stripe>
      <el-table-column prop="Id" label="编号" width="100"></el-table-column>
      <el-table-column prop="Src" label="图标" width="100"></el-table-column>
      <el-table-column prop="Name" label="分类名" ></el-table-column>
      <el-table-column prop="SortNum" label="排序号" width="100"></el-table-column>
      <el-table-column prop="Enable" label="启用" width="100"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
        list: []
    }
  }
};
</script>

加载数据

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      keyword: ""
    };
  },
  mounted() {
    //挂载后直接调用
    this.loadData()
  },
  methods: {
    /**加载数据
     * k: 关键词，如果有传入则查询相关数据
     */
    loadData(k) {
      //k有值旧将keyword更新为k
      if (k!=undefined) this.keyword = k;

      axios
        .get("/api/category/get", {
          params: {
            keyword: this.keyword
          }
        })
        .then(res => {
          this.list = res.data.rows;
        });
    }
  }
};
</script>

优化展示内容

我们优化一下启用和图标的显示效果

     <el-table-column prop="Src" label="图标" width="100">
         <template v-slot="scope">
          <el-image :src="'http://lihangsoft.com:3001/'+scope.row.Src" fit="contain" style="width:90px;height:90px;"></el-image>
        </template>
      </el-table-column>
       <el-table-column prop="Enable" label="启用" width="100">
        <template v-slot="scope">
           <el-tag v-if="scope.row.Enable==1" type="success">启用</el-tag>
           <el-tag v-if="scope.row.Enable==0" type="danger">禁用</el-tag>
        </template>
      </el-table-column>

对于图片这个部分，我们这里采用了将lihang服务器的地址拼在返回图片Src地址前。

通过代理服务器，也可使实现让图片正常加载，只需要去对/upload开头的目录去设定代理转发即可。

代理的配置如下：

{
    '^/upload':{
        target:'http://lihangsoft.com:3001'
    }
}

通过代理实现，我们的路径上就没有写域名，这种方式，以后发布到服务器上，服务器域名可以随便更改，项目代码不需要修改。

      <el-table-column prop="Src" label="图标" width="100">
         <template v-slot="scope">
          <el-image :src="scope.row.Src" fit="contain" style="width:60px;height:60px;"></el-image>
        </template>
      </el-table-column>