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

目录

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

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

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

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

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

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

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

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

---

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

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

<el-table-column label="序号" width="100" type="">
   <template slot-scope="scope">{{ scope.row.projectIndex }}</template>
</el-table-column>
 
 
//  添加索引
    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=""

<el-table-column label="序号" width="100" type="">
   <template slot-scope="scope">{{ scope.row.projectIndex }}</template>
</el-table-column>

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

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

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

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

    <template slot-scope="scope">
        <el-form-item :prop="`treeData.${scope.$index}.beginDate`" :rules="beginDateRules">
           <el-date-picker
              v-model="scope.row.beginDate"
              type="date"
              clearable
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="开始日期"
            />
        </el-form-item>
   </template>
   

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、表单表格嵌套实现代码 其余省略
<el-form ref="treeForm" :model="treeForm">
                <el-table
                  :data="treeForm.treeData"
                  row-key="id"
                  :row-style="tableRowClassName"
                  :expand-row-keys="expandKeys"
                  :tree-props="{ children: 'children'}"
                >
                  <el-table-column label="预计周期" width="310" align="center">
                    <template slot-scope="scope">
                      <el-form-item
                            :prop="'treeData.' + findPosi(treeForm.treeData,scope.row.id) + '.beginDate'"
                            :rules="beginDateRules(scope.row)"
                          >
                            <el-date-picker
                              v-model="scope.row.beginDate"
                              :style="{width: '100%'}"
                              type="date"
                              clearable
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd"
                              placeholder="开始日期"
                            />
                       </el-form-item>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>

//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
    },