ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总

目录

一、树形表格如何添加序号体现层级关系 

二、树形表格展开收缩图标位置放置，设置指定列

三、表单嵌套树形表格的校验问题以及如何给校验rules传参

普通表格绑定如下：这种方法只能校验表格的第一层，树形需要递归设置子级节点prop。

树形表格绑定如下：使用下面的方法（复制粘贴可以直接用）

四、树形表格如何通过某属性值进行过滤展示

1、可使用:row-style="tableRowClassName"去进行筛选 控制显隐 这个方法比较简单且不改变原treedata数据

2、过滤满足属性值需要的节点生成新的treedata数据来渲染表格

---

一、树形表格如何添加序号体现层级关系 

实现：treeData为表格数据，递归调用getProjectIndex方法即可实现；例如：1，1,1，1.2

   



//  添加索引
    addIndex() {
      this.treeData.forEach((node, i) => {
        this.getProjectIndex(node, '', i)
        // 默认展开第一层
        this.expandKeys.push(node.id + '')
      })
    },
    // 获取序号
    getProjectIndex(node, parentIndex, index) {
      const projectIndex = parentIndex ? `${parentIndex}.${index + 1}` : `${index + 1}`
      node.projectIndex = projectIndex
      if (node.children) {
        node.children.forEach((child, i) => {
          this.getProjectIndex(child, projectIndex, i)
        })
      }
    },

二、树形表格展开收缩图标位置放置，设置指定列

在不需要的列前加上   type=""

三、表单嵌套树形表格的校验问题以及如何给校验rules传参

需求：一个树形表格中每个树节点都需要有日期范围，想要校验子节点的日期范围不能超过父节点；

解决：如何绑定form的prop值？先了解如何绑定普通表格进行校验

1. 普通表格绑定如下：这种方法只能校验表格的第一层，树形需要递归设置子级节点prop。

2. 树形表格绑定如下：使用下面的方法（复制粘贴可以直接用）

findPosi(tree, targetId, path = '') {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        if (node.id === targetId) {
          return path + i
        }
        if (node.children && node.children.length > 0) {
          const childPath = `${path}${i}.children.`
          const result = this.findPosi(node.children, targetId, childPath)
          if (result !== null) {
            return result
          }
        }
      }
      return null
    }

具体代码实现如下：

//1、表单表格嵌套实现代码 其余省略

                
                  
                    
                  
                
              

//2、script标签内容
//定义的数据格式
treeForm: {
  treeData: []
},
//方法调用 给rules传参方式
beginDateRules(row) {
      return [
        { validator: (rule, value, callback) => { this.validateBeginDate(rule, value, callback, row) }, trigger: 'blur' }
      ]
    },
validateBeginDate(rule, value, callback, row) {
      // 没有父节点不做判断
      if (row.parentId === 0) {
        callback()
      } else {
        // 查找父节点
        const node = findParentId(this.treeForm.treeData, row.parentId)
        if (value && node.beginDate !== null) {
          if (new Date(value) < new Date(node.beginDate)) {
            callback(new Error('不能超过上一阶段日期'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
    },
//用到的工具类
// 1定义一个递归函数，接受一个对象或数组，一个目标id值和一个路径数组作为参数 查找目标id所在的路径
    findPosi(tree, targetId, path = '') {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        if (node.id === targetId) {
          return path + i
        }
        if (node.children && node.children.length > 0) {
          const childPath = `${path}${i}.children.`
          const result = this.findPosi(node.children, targetId, childPath)
          if (result !== null) {
            return result
          }
        }
      }
      return null
    }
//2通过节点id查找其父节点信息
/**
 * @param {*} tree
 * @param {*} targetId
 * @param {*} parentId
 * @returns
 * 通过节点id查找其父节点信息
 */
export function findParentId(tree, targetId) {
  for (const node of tree) {
    if (node.id === targetId) {
      return node
    }
    if (node.children) {
      const result = findParentId(node.children, targetId, node.id)
      if (result !== null) {
        return result
      }
    }
  }
  return null
}

四、树形表格如何通过某属性值进行过滤展示

1、可使用:row-style="tableRowClassName"去进行筛选 控制显隐 这个方法比较简单且不改变原treedata数据

tableRowClassName(data) {

      if (data.row.enabled === '0') {

        return { display: 'none' }

      }

    },

2、过滤满足属性值需要的节点生成新的treedata数据来渲染表格

原数据 treeData:[] 新数据：tree:[] 调用getenabledNodes（）方法

// 筛选选中节点
    getenabledNodes() {
      const tree = this.filterUnenabledNodes(this.treeData)
      console.log(tree)
    },
    filterUnenabledNodes(treeData) {
      const filteredData = []
      treeData.forEach(node => {
        if (node.enabled === '1') {
          filteredData.push(Object.assign({}, node, {
            children: node.children ? this.filterUnenabledNodes(node.children) : []
          }))
        }
      })
      return filteredData
    },