Vue+element 商品分类业务实现

商品分类：

 整体布局一眼看上去很是熟悉了 我们已经写过两三遍了

这里不同的是 要用到新的额外组件GitHub - MisterTaki/vue-table-with-tree-grid: A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView) - GitHub - MisterTaki/vue-table-with-tree-grid: A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)https://github.com/MisterTaki/vue-table-with-tree-grid

树形表格组件、我们需要额外安装

安装

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

在main.js 里注册

// 配置树形表格
import TreeTable from 'vue-table-with-tree-grid'

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

 核心表格部分和el-table也有些类似

 columns:[
          {
            label: '分类名称',
            prop: 'cat_name',
          },
          {
            label: '是否有效',
            // 表示将当前的列定义为模板列
            type:'template',
            // 表示当前这一列使用模板名称
            template:'isOk'
          },
          {
            label: '分类等级',
            // 表示将当前的列定义为模板列
            type:'template',
            // 表示当前这一列使用模板名称
            template:'level'
          },
          {
            label: '相关操作',
            // 表示将当前的列定义为模板列
            type:'template',
            // 表示当前这一列使用模板名称
            template:'setting'
          }
        ],

<tree-table :data="cateLists"
                  index-text="#"
                  :expand-type="false"
                  :show-row-hover="false"
                  border
                  class="tree-table"
                  show-index
                  stripe
                  :selection-type="false"
                  :columns="columns">
        <template slot="isOk" slot-scope="scope">
          <i class="el-icon-success" style="color:#53e457" v-if="scope.row.cat_deleted === false">i>
          <i class="el-icon-error" style="color: #ff3355" v-else>i>
        template>
        <template slot="level" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0">一级分类el-tag>
          <el-tag v-else-if="scope.row.cat_level === 1" type="success">二级分类el-tag>
          <el-tag v-else type="warning">三级分类el-tag>
        template>
        <template slot="setting" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="medium" @click="openEdit(scope.row.cat_id)">编辑el-button>
          <el-button type="danger" icon="el-icon-delete" size="medium" @click="deleteCate(scope.row.cat_id)">删除el-button>
        template>
      tree-table>

进入页面后请求回来的分类数据：

 配合使用作用域插槽就可以渲染出来页面了

 编辑和删除分类

点击相应按钮传入当前ID触发相应的事件

删除之前 询问框然后直接删除 这里用到原生promise 没有用 async await 简化

      // 删除分类相关操作
      deleteCate(id){
        this.$queding('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete(`categories/${id}`).then(() =>{
            this.$Msg({
              type: 'success',
              message: '删除分类成功!'
            });
            this.getAllCate()
          }).catch(() => {
            this.$Msg.error('删除分类失败！')
          })
        }).catch(() => {
          this.$Msg({
            type: 'info',
            message: '已取消删除'
          });
        });
      }

点击编辑显示对话框  显示原有的数据 编辑完成后在提交更新

    
    <el-dialog
      title="编辑分类"
      :visible.sync="editCateBox"
      @close="ECateClose"
      width="45%">
      <el-form ref="editCateFormRef"
               :model="editCateInfo"
               class="demo-ruleForm"
               :rules="FormDataRules"
               label-width="110px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editCateInfo.cat_name">el-input>
        el-form-item>
      el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ToEditCate">确 定el-button>
        <el-button @click="editCateBox = false">取 消el-button>
      span>
    el-dialog>
 
 
<script>
 
 
 // 编辑分类相关操作
      openEdit(id){
        this.getEditTie(id)
        this.editCateBox = true
      },
      async getEditTie(id){
        const {data:res} = await this.$http.get(`categories/${id}`)
        if (res.meta.status !==200) return this.$Msg.error('获取编辑内容失败！')
        this.editCateInfo = res.data
      },
      ToEditCate(){
        this.$refs.editCateFormRef.validate(async valid =>{
          if (!valid) return
          const {data : res} = await this.$http.put(`categories/${this.editCateInfo.cat_id}`,
            {cat_name:this.editCateInfo.cat_name})
          if (res.meta.status !== 200) return this.$Msg.error('更新分类失败！')
          this.$Msg.success('更新分类成功！')
          await this.getAllCate()
          this.editCateBox = false
        })
      },
      ECateClose(){
        this.$refs.editCateFormRef.resetFields()
      },
 
script>

增加分类

注意点：增加分类要选择 父级分类  根据选择的父级分类来决定 添加的是几级分类

点击添加按钮出现对话框---获取级联选择框的数据（到二级分类即可）

像服务器发起post 操作 

        addCateInfo:{
          cat_pid:0,添加分类的父级id，0则表示父级为0.添加一级分类
          cat_level:0,添加分类的等级，0则表示添加一级分类
          cat_name:'' 分类名 双向绑定直接获取
        },

    
    <el-dialog
      title="添加分类"
      :visible.sync="addCateBox"
      @close="ACateClose"
      width="45%">
      <el-form ref="addCateFormRef"
               :model="addCateInfo"
               class="demo-ruleForm"
               :rules="FormDataRules"
               label-width="110px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateInfo.cat_name">el-input>
        el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            v-model="CurrArr"
            :options="PCateLists"
            clearable
            class="cascader"
            :props="CSet"
            @change="handleChange">el-cascader>
        el-form-item>
      el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ToAddCate">确 定el-button>
        <el-button @click="addCateBox = false">取 消el-button>
      span>
    el-dialog>
 
 
<script>
data(){
    return {
    // 添加分类相关对话框
        FormDataRules: {
          cat_name: [
            {
              required: true,
              message: '请输入要添加的分类名',
              trigger: 'blur'
            },
          ],
        },
        addCateBox:false,
        addCateInfo:{
          cat_pid:0,
          cat_level:0,
          cat_name:''
        },
        CurrArr:[],
        // 级联选择框的相关配置
        CSet:{
          expandTrigger: 'hover',
          children:'children',
          label:'cat_name',
          value:'cat_id',
          checkStrictly:true
        }
}
}
 
 
  // 添加分类相关操作
      AddCateShow(){
        this.getPrentCate()
        this.addCateBox = true
      },
      async getPrentCate(){
        const {data:res} = await this.$http.get('categories',{params:{type:2}})
        if (res.meta.status !==200) return this.$Msg.error('获取父级分类列表失败！')
        this.PCateLists = res.data
        //console.log(this.PCateLists)
      },
      ACateClose(){
        this.$refs.addCateFormRef.resetFields()
        this.addCateInfo.cat_level = 0
        this.addCateInfo.cat_pid = 0
        this.CurrArr = []
      },
      ToAddCate(){
        this.$refs.addCateFormRef.validate(async valid =>{
          if (!valid) return
          const {data : res} = await this.$http.post('categories',this.addCateInfo)
          if (res.meta.status !== 201) return this.$Msg.error('添加分类失败！')
          this.$Msg.success('添加分类成功！')
          await this.getAllCate()
          this.addCateBox = false
        })
      },
      // 联集选择框值发生改变时
      handleChange(){
        //console.log(this.CurrArr)
        // 如果 选择数组中的length 大于0 证明选中了父级分类
        // 反之 就说明没有选中任何的父级分类
        if (this.CurrArr.length > 0){
          this.addCateInfo.cat_level = this.CurrArr.length
          this.addCateInfo.cat_pid = this.CurrArr[this.CurrArr.length-1]
          return
        }else {
          this.addCateInfo.cat_level = 0
          this.addCateInfo.cat_pid = 0
        }
      },
script>