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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

day04

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

一. 商品管理-商品分类

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

1.1 获取数据

  • 调用API获取并保存

1.2 根据数据渲染表格

  • 使用vue-table-with-tree-grid组件
  • 绑定datacolumns

    • 定义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渲染的

以上是 vue+element-ui商城后台管理系统学习(day04) 的全部内容， 来源链接： utcz.com/z/374572.html

回到顶部