后台管理系统-品牌管理静态组件与品牌列表展示

ASAYI

已于 2022-10-17 10:48:38 修改

阅读量245

点赞数

分类专栏：我的前端学习之路文章标签： javascript 前端 html

于 2022-10-17 10:41:02 首次发布

本文链接：https://blog.csdn.net/weixin_43820675/article/details/127358846

版权

我的前端学习之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述
包括添加按钮、表单组件、分页器

介绍表单组件：使用e-ui进行样式

 <!--表格
    data：表格组件展示的数据 数组类型
    border:给表格添加边框
    label：表格标题
    width：对应列宽
    align：标题对齐方式
    prop:对应列的字段名
    注意：element-ui列表展示的数据为一列一列的
    -->
    <el-table style="width: 100%" :data="list" border>
      <el-table-column
        type="index"
        prop="prop"
        label="序号"
        width="80px"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="tmName" label="品牌名称" width="width">
      </el-table-column>
      <el-table-column prop="prop" label="品牌LOGO" width="width">
        <template slot-scope="{ row, $index }">
          <img :src="row.logoUrl" alt="" style="width: 120px; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{}">
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            @click="updateTradeMark"
            >修改</el-button
          >
          <el-button type="danger" icon="el-icon-delete" size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

需要在组件挂载完毕后请求数据

//组件挂载完毕发请求
  mounted() {
    //获取列表数据的方法
    this.getPageList();
  },

methods中得到方法：

methods: {
    //获取品牌列表的数据
    async getPageList(pager = 1) {
      this.page = pager;
      //解构出参数
      const { page, limit } = this;
      //获取品牌列表的接口,需要携带data中初始化的参数
      let result = await this.$API.trademark.reqTradeMarkList(page, limit);
      if (result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.records;
      }
    },
}

后端给出的数据如下；
在这里插入图片描述
将result数据给到list中

this.list = result.data.records;

在交给data：

 data() {
    return {
      //列表展示的数据
      list: [],
    };

再直接传给列中的

      <el-table-column prop="tmName" label="品牌名称" width="width">
      </el-table-column>

但logoUrl中应该使用插件显示图片

      <el-table-column prop="prop" label="品牌LOGO" width="width">
        <template slot-scope="{ row, $index }">
          <img :src="row.logoUrl" alt="" style="width: 120px; height: 100px" />
        </template>
      </el-table-column>