目录
一、树形表格如何添加序号体现层级关系
二、树形表格展开收缩图标位置放置，设置指定列
三、表单嵌套树形表格的校验问题以及如何给校验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
}具体代码实现如下：
//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
},
