【Vue】实战项目：电商后台管理系统（Element-UI）（五）商品管理模块-分类参数功能

1. 介绍

商品参数用于显示商品的固定的特征信息，可以通过电商平台商品详情页面直观的看到

1.1 动态参数

1.2 静态属性

2. 创建git分支

git checkout -b goods_params

git push -u origin goods_params

3. 初始化分类参数组件页面

1. 新建文件 components/goods/Params.vue
2. 通过路由组件挂载到页面中

<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-alert show-icon title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false"></el-alert>

      <!-- 选择商品分类区域 -->
      <el-row class="cat_opt">
        <el-col>
          <span>选择商品分类：</span>
          <!-- 选择商品的级联选择框 -->
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped>
.cat_opt {
    
  margin: 15px 0;
}
</style>

4. 选择商品分类模块

4.1 获取商品分类列表数据

export default {
   
  data() {
   
    return {
   
      // 商品分类列表
      cateList: []
    }
  },
  created() {
   
    this.getCateList()
  },
  methods: {
   
    // 获取所有的商品分类列表
    async getCateList(){
   
      const {
    data: result } = await this.$http.get('categories')
      if (result.meta.status !== 200) {
   
        return this.$message.error('获取商品分类列表失败！')
      }
      this.cateList = result.data
    }
  }
}

4.2 商品分类级联选择框cascader

  <!-- 选择商品的级联选择框 -->
  <el-cascader
    v-model="selectedCateKeys"
    :options="cateList"
    :props="cascaderProps"
    @change="handleChange"
    clearable
  ></el-cascader> 

// 指定级联选择器的配置对象
cascaderProps: {
   
  expandTrigger: 'hover',
  value: 'cat_id',
  label: 'cat_name',
  children: 'children',
  checkStrictly: true
},
// 级联选择框双向绑定到的数组
selectedCateKeys: []

控制级联选择框的选中范围

// 级联选择框选中项变化会触发这个函数
handleChange() {
   
  // console.log(this.selectedCateKeys)
  // 选中的不是三级分类，就重置数组
  if (this.selectedCateKeys.length !== 3) {
   
    this.selectedCateKeys = []
}

5. 分类参数Tabs页签

5.1 渲染Tabs页签

  <!-- tab 页签区域 -->
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <!-- 添加动态参数面板 -->
    <el-tab-pane label="动态参数" name="first">动态参数</el-tab-pane>
    <!-- 添加静态属性面板 -->
    <el-tab-pane label="静态属性" name="second">静态属性</el-tab-pane>
  </el-tabs>

// 被激活的页签名称
activeName: 'first'

// Tab页签点击事件的处理函数
handleTabClick() {
   
  console.log(this.activeName)
}

5.2 添加参数和添加属性按钮

<!-- 添加动态参数面板 -->
<el-tab-pane label="动态参数" name="first">
  <!-- 添加参数按钮 -->
  <el-button type="primary" size="mini" :disabled="isBtnDisabled">添加参数</el-button>
</el-tab-pane>
<!-- 添加静态属性面板 -->
<el-tab-pane label="静态属性" name="second">
  <!-- 添加属性按钮 -->
  <el-button type="primary" size="mini" :disabled="isBtnDisabled">添加属性</el-button>
</el-tab-pane>

computed: {
   
  // 如果按钮需要被禁用，返回true，否则返回false
  isBtnDisabled() {
   
    if (this.selectedCateKeys.length !== 3) {
   
      return true
    }
    return false
  }
}

5.3 获取参数列表数据

<el-tab-pane label="动态参数" name="many">
<el-tab-pane label="静态属性" name="only">

// 被激活的页签名称
activeName: 'many'

computed: {
   
  // 当前选中的三级分类的id
  cateId() {
   
    if (this.selectedCateKeys.length === 3) {
   
      return this.selectedCateKeys[2]
    }
    return null
  }
}

// 级联选择框选中项变化会触发这个函数
async handleChange() {
   
  // console.log(this.selectedCateKeys)
  // 选中的不是三级分类，就重置数组
  if (this.selectedCateKeys.length !== 3) {
   
    this.selectedCateKeys = []
  }
  // 选中的是三级分类
  console.log(this.selectedCateKeys)
  // 根据所选分类的id和当前所处的面板，获取对应的参数
  const {
    data: result } = await this.$http.get(`categories/${
     this.cateId}/attributes`, {
    
    params: {
    sel: this.activeName } 
  })
  if (result.meta.status !== 200) {
   
    return this.$message.error('获取参数列表失败')
  }
  console.log(result.data)
}

5.4 切换面板 重新获取参数列表数据

// 级联选择框选中项变化会触发这个函数
handleChange() {
   
  this.getParamsData()
},
// Tab页签点击事件的处理函数
handleTabClick() {
   
  console.log(this.activeName)
  this.getParamsData()
},
// 获取参数的列表数据
async getParamsData() {
   
  // console.log(this.selectedCateKeys)
  // 选中的不是三级分类，就重置数组
  if (this.selectedCateKeys.length !== 3) {
   
    this.selectedCateKeys = []
  }
  // 选中的是三级分类
  console.log(this.selectedCateKeys)
  // 根据所选分类的id和当前所处的面板，获取对应的参数
  const {
    data: result } = await this.$http.get(`categories/${
     this.cateId}/attributes`, {
    
    params: {
    sel: this.activeName } 
  })
  if (result.meta.status !== 200) {
   
    return this.$message.error('获取参数列表失败')
  }
  console.log(result.data)
}

5.5 参数数据挂载至不同数据上

// 动态参数的数据
manyTableData: [],
// 静态属性的数据
onlyTableData: []

async getParamsData() {
   
  // console.log(result.data)
  if(this.activeName === 'many') {
   
    this.manyTableData = result.data
  } else {
   
    this.onlyTableData = result.data
  }
}

5.6 动态参数和静态属性Table表格

<!-- 添加动态参数面板 -->
<el-tab-pane label="动态参数" name="many">
  <!-- 添加参数按钮 -->
  <el-button type="primary" size="mini" :disabled="isBtnDisabled">添加参数</el-button>
  <!-- 动态参数表格 -->
  <el-table :data="manyTableData" border stripe>
    <!-- 展开行 -->
    <el-table-column type="expand"></el-table-column>
    <!-- 索引列 -->
    <el-table-column type="index"></el-table-column>
    <el-table-column label="参数名称" prop="attr_name"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
      </template>