ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总 |
您所在的位置：网站首页 › 表单如何制作表格 › ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总 |
ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总
|
目录 一、树形表格如何添加序号体现层级关系 二、树形表格展开收缩图标位置放置，设置指定列 三、表单嵌套树形表格的校验问题以及如何给校验rules传参 普通表格绑定如下：这种方法只能校验表格的第一层，树形需要递归设置子级节点prop。 树形表格绑定如下：使用下面的方法（复制粘贴可以直接用） 四、树形表格如何通过某属性值进行过滤展示 1、可使用:row-style="tableRowClassName"去进行筛选 控制显隐 这个方法比较简单且不改变原treedata数据 2、过滤满足属性值需要的节点生成新的treedata数据来渲染表格 一、树形表格如何添加序号体现层级关系实现：treeData为表格数据，递归调用getProjectIndex方法即可实现；例如：1，1,1，1.2 {{ scope.row.projectIndex }} // 添加索引 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="" {{ scope.row.projectIndex }} 三、表单嵌套树形表格的校验问题以及如何给校验rules传参需求：一个树形表格中每个树节点都需要有日期范围，想要校验子节点的日期范围不能超过父节点；
解决：如何绑定form的prop值？先了解如何绑定普通表格进行校验 普通表格绑定如下：这种方法只能校验表格的第一层，树形需要递归设置子级节点prop。 树形表格绑定如下：使用下面的方法（复制粘贴可以直接用） 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 }, |
【本文地址】