后台管理系统之商品管理之商品分类管理

写商品分类页面
首先就是把布局写好，效果是这样的，这里用到的一个外部库，就是vue-table-with-tree-grid
把他下载过来，然后在main.js那里导入然后使用

Vue.component('tree-table', treeTable) //注册为全局组件

然后就可以直接通过标签拿来用了

然后布局

<!-- 卡片区域 -->
<el-card>
  <el-row>
    <el-button type="primary">添加分类</el-button>
  </el-row>
  <!-- table区域  data绑定的是存起来的数据 -->
  <el-row>
    <el-col>
      <tree-table
      :data="cates"
      :columns="columns" //columns是绑定data里面对应table展示的数据
      show-index="true"  //展示序号
      index-text="#"  //以#表示序号列
      border
      :expand-type="false" //把点开会扩展出一条空白条给关掉
      :selection-type="false"  //把多选框给关掉
      ></tree-table>
    </el-col>
  </el-row>
</el-card>

然后看这里data

  data () {
    return {
      /* 发送请求的商品分类数据 */
      categories: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      /* 获取到的商品分类 */
      cates: [],
      /* 商品分类的总数 */
      total: [],
      /* table中columns展示的数据 */
      columns: [{
        label: '分类名称',
        prop: 'cat_name'  //表示存储分类变量
      }]
    }
  },

然后实现这个打勾的东西

然后就是使用作用域插槽，并且可以拿到数据，然后检测应该展示对还是错
首先就是在colomns添加一个分列，然后里面是写插槽的

  columns: [
    {
      label: '分类名称',
      prop: 'cat_name'
    },
    {
      label: '发是否显示',  //列名字
      type: 'template',   //这个type就是把这个列写成插槽
      template: 'isok'		//这里的就是写对应插槽的名字
    }
  ]

然后在使用的时候

  <!-- table区域 -->
  <el-row>
    <el-col>
      <tree-table
      :data="cates"
      :columns="columns"
      :show-index="true"
      index-text="#"
      border
      :expand-type="false"
      :selection-type="false">
      <template slot="isok" slot-scope="scope">  //在tree-table标签中间插入template标签，然后里面就是写作用域插槽，然后
        <i
        class="el-icon-success"
        style="color: lightgreen"
        v-if="scope.row.cat_deleted === false"></i>  //拿到数据来判断
        <i
        class="el-icon-error"
        style="color: red"
        v-else></i>
      </template>
      </tree-table>
    </el-col>
  </el-row>

实现排序和编辑

  <!-- 排序 -->
  <template slot="order" slot-scope="scope">
    <el-tag type="success" v-if="scope.row.cat_level === 0">等级一</el-tag>
    <el-tag type="danger" v-else-if="scope.row.cat_level === 1">等级二</el-tag>
    <el-tag type="warning" v-else>等级三</el-tag>
  </template>
  <!-- 操作 编辑与删除 -->
  <template slot="opt">
    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
    <el-button type="primary" icon="el-icon-delete" size="mini">删除</el-button>
  </template>

然后分页功能

  <!-- 分页效果 -->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"   //页面数据条数发送改变
      @current-change="handleCurrentChange" //页面数发生改变
      :current-page="categories.pagenum" //页面数
      :page-sizes="[3, 5, 8, 12]"
      :page-size="categories.pagesize" //页面大小
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total"> 
</el-pagination>
</div>

对应的方法

/* 设置分页效果下的方法 */
/* 页面大小的改变触发的方法 */
handleSizeChange(newSize) {
  this.categories.pagesize = newSize
  this.getCate()
},
/* 页面数发送改变的时候 */
handleCurrentChange(newPage) {
  this.categories.pagenum = newPage
  this.getCate()
}

实现添加
先写跳转出页面
记住，model 对应input对象，用来保存input的值，对象里面写每个input绑定的值，

<!-- 添加分类的对话框 -->
<el-dialog
  title="添加分类"
  :visible.sync="addDialogVisible"
  width="30%">
  <el-form ref="form" :model="addCateTable" :rules="cateTableRules" label-width="80px">
    <el-form-item label="分类名称" prop="cateName">
      <el-input v-model="addCateTable.cateName"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

  /* 添加分类的数据 */
  addCateTable: {
    cateName: ''
  },
  /* 添加分类的数据的规则 */
  cateTableRules: {
    cateName: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ]
  }

然后获取数据，然后保存起来
下面是级联选择框中数据

/* 获取添加分类中的选择框的分类数据 */
async getAddCate() {
  const { data: res } = await this.$http.get('categories', {
    params: { type: 2 }
  })
  if (res.meta.status !== 200) return this.$message.error('错误')
  this.getAddCateTab = res.data
}

然后实现级联选择器

<!-- 添加分类的对话框 -->
<el-dialog
  title="添加分类"
  :visible.sync="addDialogVisible"
  width="30%">
  <el-form ref="form" :model="addCateTable" :rules="cateTableRules" label-width="80px">
    <el-form-item label="分类名称" prop="cateName">
      <el-input v-model="addCateTable.cat_name"></el-input>
    </el-form-item>
     <el-form-item label="选择分类" >
      <!-- 级联选择器 v-model是绑定选择的值然后这些值保存在的那个数组-->
      <!-- option是绑定数据源 -->
      <!-- expand-trigger是绑定展开级联的方式
      props展示出来的label，还有选择某一项的时候是选择哪一个value
      children是绑定数据中如何作为下级数据
       -->
       <!-- clearable 表示是否清空 -->
       <!-- filterable 表示是否可以搜索 -->
       <!-- change-on-select 表示是否可以选择任意一项，包括一级 -->
      <el-cascader
        v-model="cascaderKey"
        :options="getAddCateTab"
        expand-trigger= 'hover'
        :props="{
          value: 'cat_id',
          label: 'cat_name',
          children: 'children'}"
        @change="cascaderChange"
        clearable
        filterable
        change-on-select>
      </el-cascader>
     </el-form-item>
  </el-form>

然后实现选择了级联选择框里面的内容的时候，为添加分类的父级id和level保存起来

/* 级联选择器的选择的了发生改变 */
cascaderChange() {
  if (this.cascaderKey.length > 0) {
    /* 把选定的id的最后一个作为添加的商品分类的父级id */
    this.addCateTable.cat_pid = this.cascaderKey[this.cascaderKey.length - 1]
    /* 把选定的id的长度作为父级的层级，比如一级的父级的层级0 */
    this.addCateTable.cat_level = this.cascaderKey.length
  }
},

然后实现添加

/* 实现添加分类 */
addCate() {
  this.$refs.addfroms.validate(async valid => {
    if (!valid) return
    const { data: res } = await this.$http.post('categories', this.addCateTable)
    if (res.meta.status !== 201) return this.$message.error('错误')
    this.$message.success('添加成功')
    this.getCate()
    this.addDialogVisible = false
  })
}