目录
一、树形表格如何添加序号体现层级关系
二、树形表格展开收缩图标位置放置，设置指定列
三、表单嵌套树形表格的校验问题以及如何给校验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值？先了解如何绑定普通表格进行校验
-
普通表格绑定如下：这种方法只能校验表格的第一层，树形需要递归设置子级节点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> -
树形表格绑定如下：使用下面的方法（复制粘贴可以直接用）
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
}具体代码实现如下：文章来源：https://www.toymoban.com/news/detail-667309.html
//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（）方法文章来源地址https://www.toymoban.com/news/detail-667309.html
// 筛选选中节点
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
},到了这里，关于ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
