如何免费获取适用于企业网站的WordPress后台管理系统权限?
摘要:网站后台管理系统权限,wordpress免费主题企业,南京网站建设cnee,首饰行业网站建设策划一、递归组件 什么是递归,Javascript中经常能接触到递归函数。也就是函数自己调用自己。那对于组件来说也是一
网站后台管理系统权限,wordpress免费主题企业,南京网站建设cnee,首饰行业网站建设策划一、递归组件
什么是递归#xff0c;Javascript中经常能接触到递归函数。也就是函数自己调用自己。那对于组件来说也是一样的逻辑。平时工作中见得最多应该就是菜单组件#xff0c;大部分系统里面的都是递归组件。文章中我做了按需引入的配置#xff0c;所以看不到我引用组…一、递归组件
什么是递归Javascript中经常能接触到递归函数。也就是函数自己调用自己。那对于组件来说也是一样的逻辑。平时工作中见得最多应该就是菜单组件大部分系统里面的都是递归组件。文章中我做了按需引入的配置所以看不到我引用组件、Vue3的相关API等等。需要了解的小伙伴可以看我的另一篇文章 Vite4Pinia2vue-router4ElmentPlus搭建Vue3项目(组件、图标等按需引入)
二、Table的合并
复杂的表格无非就是行或者列的合并。主要涉及到colspan和rowspan。colspan属性规定单元格可横跨的列数。rowspan属性规定单元格可横跨的行数。比如下面的列子。第一行为标题。表格最多为5列。所以第一行的列需要全部合并colspan的值就为5。第三行和第四行都是统一的食品分类需要合并所以第三行的第一列就需要往下合并。往下合并两行所以rouspan就为2。但是这里要注意列合并不用管。行的话被合并的列就需要删除。是不是很简单。两个设置就能实现下面的列子。 templatetable classtabletrtd colspan5某某小卖部/td/trtrtd商品分类/tdtd商品/tdtd价格/tdtd库存/tdtd描述/td/trtrtd rowspan2食品/tdtd瓜子/tdtd5元/tdtd20/tdtd可以吃的瓜子/td/trtrtd花生/tdtd6元/tdtd30/tdtd可以吃的花生/td/tr/table
/templatestyle langscss
.table {width: 100%;margin-left: 0;text-align: center;font-size: 12px;
}.table th,
.table td {border: 1px solid #070707 !important;padding: 0.35rem !important;font-size: 16px;vertical-align: middle !important;
}.ts-table-bold {td {font-weight: bold;font-size: 18px;}
}
/style三、核心方法
核心的方法主要就是行和列的合并规则不管是我现在这个表格还是其他复杂的只要你细心的观察。总会发现规则。然后就能利用js去实现。
因为需要知道树结构总共拥有多少节点树结构有多少层级。我在列子中也用到了递归函数。比如下面的树结构转平行结构。参数tree的话表示树节点。第二个list表示我需要存储对象第三个参数表示父节点的id。
// 获取整个树数据的长度 用于行的合并
const treeToList (tree: TreeType[], list: TreeType[], parentId: string | null) {for (let i in tree) {const nodeData tree[i];list.push({id: nodeData.id,title: nodeData.title,parentId: parentId});if (nodeData.children nodeData.children.length ! 0) {treeToList(nodeData.children, list, nodeData.id)}}
}
三、组件的封装完整代码
上面的列子是写死的所以实现起来比较的简单接下来就需要获取动态的数据动态进行行或者列的合并实现复杂的表格展示。组件中props里面的参数data就是数据源level表示整个数据的层级currentLevel表示当前递归到第几层。
