获取商品分类信息

components=>新建文件夹goods=>Cate.vue

index.js 配置路由

接口文档
在这里插入图片描述

响应数据

{
    "data": [
        {
            "cat_id": 1,
            "cat_name": "大家电",
            "cat_pid": 0,
            "cat_level": 0,
            "cat_deleted": false,
            "children": [
                {
                    "cat_id": 3,
                    "cat_name": "电视",
                    "cat_pid": 1,
                    "cat_level": 1,
                    "cat_deleted": false,
                    "children": [
                        {
                            "cat_id": 6,
                            "cat_name": "曲面电视",
                            "cat_pid": 3,
                            "cat_level": 2,
                            "cat_deleted": false
                        },
                        {
                            "cat_id": 7,
                            "cat_name": "海信",
                            "cat_pid": 3,
                            "cat_level": 2,
                            "cat_deleted": false
                        }
                    ]
                }
            ]
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

获取商品分类的数据

<template>
    <div>
        <!-- 面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片试图-->
    <el-card>
      <el-row >
        <el-col>
          <el-button type="primary">添加分类</el-button>
        </el-col>
      </el-row>

    </el-card>
    </div>
</template>

<script>
export default {
    data(){
        return{
            // 查询分类列表的参数对象
            queryInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            // 分类列表
            cateList:[],
            // 总记录数
            total:0,
        }
    },
    created(){
        this.getCateList()
    },
    methods:{
        async getCateList(){
            const {data:res} = await this.$http.get('categories',{
                params:this.queryInfo
            })
            if(res.meta.status !== 200){
                return this.$message.error('获取商品列表失败')
            }
            this.cateList=res.data.result
            this.total = res.data.total
            console.log(this.cateList)
        }
    }
}
</script>

在这里插入图片描述

展示商品分类列表

在这里插入图片描述
elementui 是没有这种组件的

需要安装新的依赖
在这里插入图片描述

如果你是使用 vue create my-project 搭建项目，使用时操作如下

npm i vue-table-with-tree-grid -S

// 全局注册第三方表格组件
import ZkTable from 'vue-table-with-tree-grid'
Vue.component('tree-table',ZkTable)

使用文档地址vue-table-with-tree-grid

<!-- tree-table 表格-->
      <tree-table :data="cateList" :columns="columns"></tree-table>

//tree-table列的定义
            columns:[
                {
                    label:'分类名称',
                    prop:"cat_name"
            }
                
            ]

为啥会直接显示分类的下属的属性因为返回的数据名就时children,该属性用来指定子一级的数据
在这里插入图片描述
去除复选框
在这里插入图片描述

不需要展开
在这里插入图片描述

需要索引列
在这里插入图片描述

//tree-table列的定义
            columns:[
                {
                    label:'分类名称',
                    prop:"cat_name"
            },
            {
                    label:'是否有效',
                    // 将当前列定义为模板列
                    type:'template',
                    // 当前列使用的模板名称
                    template:'isOk'
            }
                
            ]

<!-- tree-table 表格-->
      <tree-table :data="cateList" :columns="columns" :selection-type=false :expand-type=false show-index border>
          <!-- 是否有效-->
          <template slot="isOk" slot-scope="scope">
              <i class="el-icon-error" style="color:red" v-if="scope.row.cat_deleted"></i>
              <i class="el-icon-success" style="color:lightgreen" v-else></i>
          </template>
      </tree-table>

在这里插入图片描述

//tree-table列的定义
            columns:[
                {
                    label:'分类名称',
                    prop:"cat_name"
            },
            {
                    label:'是否有效',
                    // 将当前列定义为模板列
                    type:'template',
                    // 当前列使用的模板名称
                    template:'isOk'
            },
            {
                    label:'排序',
                    // 将当前列定义为模板列
                    type:'template',
                    // 当前列使用的模板名称
                    template:'order'
            },
                
            ]

<!-- 排序-->
          <template slot="order" slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
              <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
              <el-tag size="mini" type="waring" v-else>三级</el-tag>
          </template>

<!-- 操做-->
          <template slot="operater" slot-scope="scope">
              <el-button size="mini" type="primary" class="el-icon-edit">编辑</el-button>
              <el-button size="mini" type="danger" class="el-icon-delete">删除</el-button>
          </template>

{
label:'操作',
// 将当前列定义为模板列
type:'template',
// 当前列使用的模板名称
template:'operater'
            },

<!-- 分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3,5,10,15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

// 分页 当页大小改变时
    handleSizeChange(pagesize){
        this.queryInfo.pagesize=pagesize
        this.getCateList()
    },
    handleCurrentChange(pagenum){
        this.queryInfo.pagenum=pagenum
        this.getCateList()
    }

完整代码

<template>
  <div>
    <!-- 面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片试图-->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary">添加分类</el-button>
        </el-col>
      </el-row>

      <!-- tree-table 表格-->
      <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index border>
        <!-- 是否有效-->
        <template slot="isOk" slot-scope="scope">
          <i class="el-icon-error" style="color: red" v-if="scope.row.cat_deleted"></i>
          <i class="el-icon-success" style="color: lightgreen" v-else></i>
        </template>

        <!-- 排序-->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>

        <!-- 操做-->
        <template slot="operater" >
          <el-button size="mini" type="primary" class="el-icon-edit">编辑</el-button>
          <el-button size="mini" type="danger" class="el-icon-delete">删除</el-button>
        </template>
      </tree-table>

      <!-- 分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3,5,10,15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询分类列表的参数对象
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      // 分类列表
      cateList: [],
      // 总记录数
      total: 0,
      //tree-table列的定义
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
        },
        {
          label: '是否有效',
          // 将当前列定义为模板列
          type: 'template',
          // 当前列使用的模板名称
          template: 'isOk',
        },
        {
          label: '排序',
          // 将当前列定义为模板列
          type: 'template',
          // 当前列使用的模板名称
          template: 'order',
        },
        {
          label: '操作',
          // 将当前列定义为模板列
          type: 'template',
          // 当前列使用的模板名称
          template: 'operater',
        },
      ],
    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    async getCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: this.queryInfo,
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取商品列表失败')
      }
      this.cateList = res.data.result
      this.total = res.data.total
      console.log(this.cateList)
    },
    // 分页 当页大小改变时
    handleSizeChange(pagesize){
        this.queryInfo.pagesize=pagesize
        this.getCateList()
    },
    handleCurrentChange(pagenum){
        this.queryInfo.pagenum=pagenum
        this.getCateList()
    }
  },
}
</script>
# vue.js # 分类 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue