vue+element-ui商城后台管理系统学习(day04)

day04

---

一. 商品管理-商品分类
二. 商品管理-分类参数
三. 自己写遇到的问题

---

一. 商品管理-商品分类

• 创建子分支
• 创建good-cate路由

1.1 获取数据

• 调用API获取并保存

1.2 根据数据渲染表格

• 使用vue-table-with-tree-grid组件
• 绑定data columns
  • 定义label, prop等属性

1.3 添加分类功能

• 显示对话框
• 根据点击下拉菜单来判断要添加的分类等级是一级、二级、三级( 默认一级 )
• 获取父级分类列表（type=2）
  • 级联选择器
• 通过点击级联选择器改变pid和存放父级id的arr的length判断当前要添加的分类是那一个等级
• 关闭对话框重置表单操作与级联选择器绑定的存放已选标签的key

1.4 一些步骤

• 确认按钮发送请求最后再做, 期间可以用表单与验证console.log出validate结果和即将要发送的表单
• 不要在点击确认的时候有重置操作, 重置操作交给dialog的@close进行

1.5 部署到码云

• 拉取全部远程分支

git fetch --all
git pull --all
git branch -all # 查看

• 一些常用命令
  

二. 商品管理-分类参数

• 分动态参数与静态属性
• 只允许选择三级分类才能修改

2.1 编写UI结构

• 用到breadcrumb, card, alert

2.2 控制级联选择器的选择范围

• 判断length是否为3不是则清空并且return

2.4 编写主要内容

• 点击tab来决定显示哪一模块

• 判断级联选择器的length来使添加按钮是否被禁用

• 注意:

  • 每次修改级联选择器和菜单的时候都应该重新获取数据
  • 要根据每次请求回来的是many还是only来存放渲染table渲染的东西

• 注意动态与静态区分开

• 动态与静态添加页面公用同一个对话框

• 调用接口添加params

• 添加修改属性对话框

• 添加删除功能

  • 注意做完操作后刷新数据

• 添加expand展开展示tag标签

  • 因为传过来的属性是一个字符串
  • 使用.split(’ ')来变成数组
  • 过程若是空字符串也会变成一个[’’]所以添加表达式判断, 若无值返回[]

• tag标签新增部分

  • 添加按钮与文本框切换的效果

  • @keyUp.enter.native是按下回车

  • 出现问题: 不同行会公用同一个input

    • 解决:
      • 在把string转换为arr的过程中为scope.row添加inputVisible与inputValue属性

  • 点击按钮自动获得焦点

    • $nextTick()是重新渲染页面的时候执行回调的函数
    • 而v-if就是会使元素重新渲染的

    this.$nextTick(() => {
      this.$refs.saveTagInput.$refs.input.focus()
    })
    

  • 失去焦点判断值

    • 发送请求给服务器(join(' ')把数组变成字符串)

    handleInputConfirm () {
        // 判断是否为空
        if (row.inputValue.trim().length === 0) {
            row.inputValue = ''
            row.inputVisible = false
            // return 是因为判断已经为空不进行后续操作
            return
        }
    }
    

  • 删除标签调用函数

    • 调用splice删除数组指定项(需要传入index)
    • 把发送请求包装成函数,在handleinputConfirm中也换成该函数的调用

  • 小问题: 三级标签换成二级标签的时候数据并没有被清空

    • 解决方法:
      • 使接受many跟only的table的数据进行清空操作即可

  • 为静态属性也做展开展示标签的处理

• 提交到码云

三. 自己写遇到的问题

3.1 发现elementUI已经更新了属性结构的table

• 使用树形结构的懒加载

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

• 使用了tree的table使用type="index"会显示异常(不是正确的index)

3.2 dialog

• template只能放在根中不能被嵌套
• cascader级联表
  • 默认不能选中父节点
  • 配置props: { checkStrictly: true }

3.3 提交表单

• 显示表单的时候如果要lazy-loade要

  • <el-table :load=""></el-table>
    methods: {
        goodsLazyload (tree, treeNode, resolve) {
          setTimeout(() => {
            resolve(tree.children)
          }, 300)
        }
    }
    

• 删除分类没有效果

• tree-props的hasChildren会影响不是lazeload的效果

3.4 更换页码

• :page-size="queryInfo.pagesize"跟:current-page="queryInfo.pagenum"不是双向绑定
• 在触发更换页面或者更炫一页数量的时候会传入newPage或者newSize的参数, 要赋值上

3.5 cascader的高度问题

• 在全局样式中添加

.el-cascader-menu{
  height: 300px;
}

3.6 添加参数标签

• 自动聚焦记得在$nextTick()后, 因为使用v-if渲染的