4、分类管理功能开发

项目仓库：https://github.com/changeclass/vue-shop

UI

树形表格插件

20201107145853090

插件地址：https://github.com/MisterTaki/vue-table-with-tree-gird

安装依赖

在入口文件导入插件并注册

import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)

使用

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

使用具名插槽

在此插件中使用模板渲染第二列数据。

<template v-slot:isok="scope">
    <i
       v-if="scope.row.cat_deleted === false"
       class="el-icon-success"
       style="color: lightgreen"
       ></i>
    <i v-else class="el-icon-error" style="color: red"></i>
</template>

具名插槽名为isos，传入数据名为scope

columns: [{
    label: '分类名称',
    prop: 'cat_name'
}, {
    label: '是否有效',
    // 表示当前列为模板列
    type: 'template',
    // 使用的模板名称
    template: 'isok'
}]

级联分类

<el-cascader
             v-model="selectedKeys"
             :options="parentCateList"
             :props="cascaderProps"
             expand-trigger="hover"
             @change="parentCateChanged"
             ></el-cascader>

v-model
绑定的值为一个数组
options
绑定的数据源
props
选项配置

data(){
    // 父级分类列表
    parentCateList: [],
        // 级联选择器配置项
        cascaderProps: {
            // expandTrigger: 'hover',
            value: 'cat_id',
                label: 'cat_name',
                    children: 'children'
        },
            // 选中的父级分类ID数组
            selectedKeys: []
}

// 点击按钮展示添加分类对话框
showAddDialog () {
    this.getParentCateList()

    this.addCateDialogVisible = true
},
    // 获取父级分类的数据列表
    async getParentCateList () {
        const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
        if (res.meta.status !== 200) {
            return this.$message.error('获取父级数据分类失败')
        }
        this.parentCateList = res.data
        console.log(this.parentCateList)
    },
        // 选择项发生变化
        parentCateChanged () {
            console.log(this.selectedKeys)
            if (this.selectedKeys.length > 0) {
                // 选中了父级分类
                this.addCateForm.catpid = this.selectedKeys[this.selectedKeys.length - 1]
                this.addCateForm.cat_level = this.selectedKeys.length
            } else {
                this.addCateForm.catpid = 0
                this.addCateForm.cat_level = 0
            }
        },
            // 点击按钮 添加分类
            addCate () {
                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
                })
            },
                // 监听添加分类对话框关闭事件
                addCateDialogClosed () {
                    this.$refs.addCateFormRef.resetFields()
                    this.selectedKeys = []
                    this.addCate.cat_level = 0
                    this.addCate.cat_pid = 0
                }

新版ElementUI级联选择器存在当内容过多时,导致过长的问题。解决方案也很简单，只需要在全局样式表中为其指定高度即可。
/* 解决级联过长 */
.el-cascader-menu {
  height: 300px;
}

参数管理

级联选择框只允许选择第三级

因为选择的数据会被存储到数组中，因此只需要判断数组长度即可。

handleChange () {
    if (this.selectedCateKeys.length !== 3) {
        this.selectedCateKeys = []
    }
}

Tabs标签

<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
绑定需要显示的页签名称
name
页签的名称

TAG标签

出现在展开行内的小标签

<el-table-column type="expand">
    <template v-slot="scope">
        <!-- 循环渲染tag标签 -->
        <el-tag
                closable
                v-for="(item, i) in scope.row.attr_vals"
                :key="i"
                @close="handleClose(i, scope.row)"
                >
            {{ item }}
        </el-tag>
    </template>
</el-table-column>

展开行通过插槽定义，为其添加数据。可以编辑的小标签使用input+button控制。

<!-- 输入文本框 -->
<el-input
          class="input-new-tag"
          v-if="scope.row.inputVisible"
          v-model="scope.row.inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm(scope.row)"
          @blur="handleInputConfirm(scope.row)"
          >
</el-input>
<!-- 添加按钮 -->
<el-button
           v-else
           class="button-new-tag"
           size="small"
           @click="showInput(scope.row)"
           >+ New Tag</el-button
    >

通过每个对象的inputVisible属性控制当前是否编辑状态。当点击回车后和失去焦点时都会触发handleInputConfirm事件。

showInput (row) {
    row.inputVisible = true
    // $nextTick 当页面上元素被重新渲染时执行的回调函数
    this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
    })
},

// 删除对应参数可选项
handleClose (i, row) {
    console.log(row)
    row.attr_vals.splice(i, 1)
    this.saveAttrVals(row)
}

// 文本框失去焦点会按下回车
async handleInputConfirm (row) {
    if (row.inputValue.trim().length === 0) {
        row.inputValue = ''
        row.inputVisible = false
    }
    // 用户输入了真实内容.
    row.attr_vals.push(row.inputValue.trim())
    row.inputValue = ''
    row.inputVisible = false
    this.saveAttrVals(row)
},
    // 将对 attr_vals 的操作保存到数据库
    async saveAttrVals (row) {
        // 发起请求
        const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`, {
            attr_name: row.attr_name,
            attr_sel: row.attr_sel,
            attr_vals: row.attr_vals.join(' ')
        })
        if (res.meta.status !== 200) {
            return this.$message.error('修改失败')
        }
        this.$message.success('修改成功!')
    },