Vue 项目实战四 商品分类 参数管理 table-tree

1.0 商品分类 （插件vue-table-with-tree-grid

1. 使用第三方插件vue-table-with-tree-grid展示分类数据

 1).在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装
    2).打开main.js，导入vue-table-with-tree-grid
    import TreeTable from 'vue-table-with-tree-grid'
    .....
    Vue.config.productionTip = false

2. 全局注册组件

Vue.component('tree-table', TreeTable)

3. 使用组件展示分类数据

<!-- 分类表格
:data(设置数据源) :columns(设置表格中列配置信息) :selection-type(是否有复选框)
:expand-type(是否展开数据) show-index(是否设置索引列) index-text(设置索引列头)
border(是否添加纵向边框) :show-row-hover(是否鼠标悬停高亮) -->

<tree-table :data="cateList" :columns="columns" :selection-type="false"
:expand-type="false" show-index index-text="#" border :show-row-hover="false"> 
</tree-table>

在数据中添加columns:
columns: [
    {
   label:'分类名称',prop:'cat_name'}
]

4. 使用vue-table-with-tree-grid定义模板列并添加自定义列

      <!-- 列表区域 -->
      <tree-table
        :data="cateList"
        :columns="columsn"
        show-index
        index-text="#"
        border
        :selection-type="false"
        :expand-type="false"
        :show-row-hover="false"
      >
        <!-- 分类名称 -->
        <template slot="isok" slot-scope="scope">
          <i v-if="scope.row.cat_deleted == false" class="el-icon-success" style="color: green"></i>
          <i v-else class="el-icon-error" style="color: red"></i>
        </template>
        <!-- 是否有效 -->
        <template slot="sort" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level == 0" size="mini">一级</el-tag>
          <el-tag v-else-if="scope.row.cat_level == 1" size="mini" type="success">二级</el-tag>
          <el-tag v-else size="mini" type="warning">三级</el-tag>
        </template>
        <!-- 排序 -->
        <template slot="operation" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="editCate(scope.row.cat_id)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delCate(scope.row.cat_id)">删除</el-button>
        </template>
      </tree-table>

1.1 商品分类（级联选择器的使用!!）

1. 一定要先看官网,看demo显示,一级对应数据的字段
2. 现在我们的页面没有保存,有效果,但是没有数据
3. 解决问题的方法有两种:1.通过官网的api修改模板的props2.修改数据
4. 官网里面的导的,要显示这个文字,你的数据里面必须有lable字段,要得到选中的值,数值必须有value字段
5. 添加级联菜单显示父级分类

<el-form-item label="父级分类" prop="cat_pid">
  <!-- expandTrigger='hover'(鼠标悬停触发级联) v-model(设置级联菜单绑定数据) :options(指定级联菜单数据源)  :props(用来配置数据显示的规则) 
  clearable(提供“X”号完成删除文本功能) change-on-select(是否可以选中任意一级的菜单) -->
  <el-cascader expandTrigger='hover' v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" @change="parentCateChange" clearable change-on-select></el-cascader>
</el-form-item>

添加数据
//配置级联菜单中数据如何展示
cascaderProps:{
   
  value:'cat_id',
  label:'cat_name',
  children:'children',
  expandTrigger:'hover'
},
//绑定用户选择的分类值
selectedKeys:[]
.....
methods:{
   
  .....
  parentCateChange(){
   
    //级联菜单中选择项发生变化时触发
    console.log(this.selectedKeys)
    //如果用户选择了父级分类
    if(this.selectedKeys.length > 0){
   
      //则将数组中的最后一项设置为父级分类
      this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
      //level也要跟着发生变化
      this.addCateForm.cat_level = this.selectedKeys.length
      return
    }else{
   
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
      return
    }
  },
  addCateDialogClosed(){
   
    //当关闭添加分类对话框时，重置表单
    this.$refs.addCateFormRef.resetFields()
    this.selectedKeys = [];
    this.addCateForm.cat_pid = 0
    this.addCateForm.cat_level = 0
  },
  addCate() {
   
    //点击确定，完成添加分类
    console.log(this.addCateForm)
    this.$refs.addCateFormRef.validate(async valid => {
   
      if (!valid) return
      //发送请求完成添加分类
      const {
    data: res } = await this.$http.post(
        'categories',
        this.addCateForm
      )

      if (res.meta.status !== 201) {
   
        return this.$message.error('添加分类失败')
      }

      this.$message.success('添加分类成功')
      this.getCateList()
      this.addCateDialogVisible = false
    })
  }
}

1.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-row>
        <el-col>
          <el-button type="primary" @click="showAddCate">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 列表区域 -->
      <tree-table
        :data="cateList"
        :columns="columsn"
        show-index
        index-text="#"
        border
        :selection-type="false"
        :expand-type="false"
        :show-row-hover="false"
      >
        <!-- 分类名称 -->
        <template slot="isok" slot-scope="scope">
          <i v-if="scope.row.cat_deleted == false" class="el-icon-success" style="color: green"></i>
          <i v-else class="el-icon-error" style="color: red"></i>
        <