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 = projectIndexif (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-pickerv-model="scope.row.beginDate"type="date"clearableformat="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-pickerv-model="scope.row.beginDate":style="{width: '100%'}"type="date"clearableformat="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},