找婚庆公司去什么网站,域名和主机有了怎么做网站,富阳网站建设推广,北京企业名录大全目录 一、树形表格如何添加序号体现层级关系
二、树形表格展开收缩图标位置放置#xff0c;设置指定列
三、表单嵌套树形表格的校验问题以及如何给校验rules传参
普通表格绑定如下#xff1a;这种方法只能校验表格的第一层#xff0c;树形需要递归设置子级节点prop。
树…目录 一、树形表格如何添加序号体现层级关系
二、树形表格展开收缩图标位置放置设置指定列
三、表单嵌套树形表格的校验问题以及如何给校验rules传参
普通表格绑定如下这种方法只能校验表格的第一层树形需要递归设置子级节点prop。
树形表格绑定如下使用下面的方法复制粘贴可以直接用
四、树形表格如何通过某属性值进行过滤展示
1、可使用:row-styletableRowClassName去进行筛选 控制显隐 这个方法比较简单且不改变原treedata数据
2、过滤满足属性值需要的节点生成新的treedata数据来渲染表格 一、树形表格如何添加序号体现层级关系
实现treeData为表格数据递归调用getProjectIndex方法即可实现例如11,11.2
el-table-column label序号 width100 typetemplate slot-scopescope{{ 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序号 width100 typetemplate slot-scopescope{{ scope.row.projectIndex }}/template
/el-table-column
三、表单嵌套树形表格的校验问题以及如何给校验rules传参
需求一个树形表格中每个树节点都需要有日期范围想要校验子节点的日期范围不能超过父节点 解决如何绑定form的prop值先了解如何绑定普通表格进行校验 普通表格绑定如下这种方法只能校验表格的第一层树形需要递归设置子级节点prop。 template slot-scopescopeel-form-item :proptreeData.${scope.$index}.beginDate :rulesbeginDateRulesel-date-pickerv-modelscope.row.beginDatetypedateclearableformatyyyy-MM-ddvalue-formatyyyy-MM-ddplaceholder开始日期//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 reftreeForm :modeltreeFormel-table:datatreeForm.treeDatarow-keyid:row-styletableRowClassName:expand-row-keysexpandKeys:tree-props{ children: children}el-table-column label预计周期 width310 aligncentertemplate slot-scopescopeel-form-item:proptreeData. findPosi(treeForm.treeData,scope.row.id) .beginDate:rulesbeginDateRules(scope.row)el-date-pickerv-modelscope.row.beginDate:style{width: 100%}typedateclearableformatyyyy-MM-ddvalue-formatyyyy-MM-ddplaceholder开始日期//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-styletableRowClassName去进行筛选 控制显隐 这个方法比较简单且不改变原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},
