avue crud-tree介绍

前言

最近遇到了需要使用表格树的需求，发现avue crud有tree的组件，然后在使用过程中发现诸多问题，网上对应的介绍也很少，所以在自己使用成功之后为后人提供帮助。

正文

效果图

html部分

        <avue-crud ref="crud" v-model="query" :option="option" :data="form.children" :before-close="beforeClose" @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel">
          <template slot="menu" slot-scope="{ row, type }">
            <el-button size="small" :type="type" @click="handleAdd(row)">新增子级</el-button>
          </template>
        </avue-crud>

data部分

      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: true,
        rowKey: 'rowKey',
        rowParentKey: 'rowParentKey',
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        // defaultExpandAll:true,
        column: [
          {
            label: '名称',
            prop: 'moduleName',
            align: 'left',
            width: 200,
            rules: [
              {
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '末级子项数',
            width: 150,
            // 新增模态框是否可以添加这个字段
            display: false,
            prop: 'lastLevelNumber'
          },
          {
            label: '解释说明',
            prop: 'moduleDescribe',
            rules: [
              {
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          }
        ]
      },

js部分

    // avue-curd新增的模态框的关闭前的事件,用于清空记录的父id，解决不新增关闭后会出现父子层级错误问题
    beforeClose(done, type) {
      this.rowParentKey = ''
      done()
    },    
// 表格删除的方法
    rowDel(row, index, done) {
      done(row)
    },
    // 表格新增的方法
    rowSave(row, done, loading) {
      row.rowParentKey = this.rowParentKey
      row.rowKey = new Date().getTime()
      // 解决不初始化数据时出现的新增下级父id（rowParentKey）正确但会变成同级问题
      row.children = []
      // 新增也会走这个保存方法，所以需要赋值为undefined
      this.rowParentKey = undefined
      done(row)
    },
    // 表格修改的方法
    rowUpdate(row, index, done) {
      done(row)
    },
    // 表格新增子级方法
    handleAdd(row) {
      this.rowParentKey = row.rowKey
      // 新增的时候没有子项
      this.$refs.crud.rowAdd()
    },

描述

新增最外层会直接调用rowSave方法，而新增子级会先执行handleAdd，为rowParentKey赋值，来记录要添加的元素的父亲是谁，在添加完之后赋值为undefined，并且需要添加before-close事件来处理新增子级时关闭模态框没有实际新增子级记录的父id没有被重置为undefined问题。

在option.column中可以为每一项添加新增时的配置，display:false表示新增时没有这个选项，rules是新增时的form表单校验

! 在修改时需要注意: 需要保持数据的响应式，需要用this.$set或其他方式让数据保持响应式，不然会出现删除、新增和新增子项，数据改变视图不更新问题，并且$forceUpdate也无效,this.$set(arr或obj, index或key, 要赋值的源元素),举例：

this.$set(arr, 1, '1111')

this.$set(obj, 'a', '111')

结语

avue功能还是十分强大的，只是avue文档的介绍非常少，所以很多都需要摸索，这次curd-tree基本略知一二了，若有不正之处，欢迎指正和交流，不懂的地方可以留言或者私信，都会回复。