为学校网站建设网站每年续费费用

当前位置： 首页 > news >正文

为学校网站建设,网站每年续费费用,免费个人简历模板,齐齐哈尔城市建设档案馆网站一、递归组件 什么是递归#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表示当前递归到第几层。 templatetr v-if!data.children || data.children.length 0td :colspan(level - currentLevel 1) / 2{{ data.title }}/td/trtr v-elsetd :rowspangetTreeToArr(data.children) 1{{ data.title }}/td/trtemplate v-forit in data.children :keyit.idts-recursion-table :datait :levellevel :currentLevelcurrentLevel 1 //template /templatescript langtstype TreeType {title: stringid: stringparentId: string | nullchildren?: ArrayTreeType }export default defineComponent({name: TsRecursionTable,props: [data, level, currentLevel],setup() {// 获取整个树数据的长度 用于行的合并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)}}}const getTreeToArr (data: any) {let result:TreeType[] []if (!data) {return 0}treeToList(data, result,null)return result.length}return {getTreeToArr}} }) /script四、组件的使用完整代码 templatediv stylewidth: 1000px;margin: 200px auto auto auto;table classtabletrtd :colspanlevel某某区人数统计/td/trts-recursion-table v-for(item, index) in tableData :keyitem.id :dataitem :levellevel :currentLevel1 //table/div /templatescript langtstype TreeType {title: stringid: stringparentId: string | nullchildren?: ArrayTreeType }export default defineComponent({setup() {const rowLength refnumber(0)const level refnumber(0)const state reactive({tableData: [{title: 社区一,id: 1,parentId: null,children: [{title: 街道一,id: 1-1,parentId: 1,children: [{id: 1-1-1,parentId: 1-1,title: 小区1,children: [{id: 1-1-1-1,parentId: 1-1-1,title: 单元1,children: [{id: 1-1-1-1-1,parentId: 1-1-1-1,title: 住户1},{id: 1-1-1-1-2,parentId: 1-1-1-1,title: 住户2}]},{id: 1-1-1-2,parentId: 1-1-1,title: 单元2},]},{id: 1-1-2,parentId: 1-1,title: 小区2},]},{title: 街道二,id: 1-2,parentId: 1,children: [{id: 1-2-1,parentId: 1-2,title: 小区1},{id: 1-2-2,parentId: 1-2,title: 小区2}]}]},{title: 社区二,id: 2,parentId: null,children: [{title: 街道一,id: 2-1,parentId: 2,children: [{id: 2-1-1,parentId: 2-1,title: 小区1},{id: 2-1-2,parentId: 2-1,title: 小区2},{id: 2-1-3,parentId: 2-1,title: 小区3},]}]}] as TreeType[]})// 获取整个树数据的长度 用于行的合并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)}}}// 获取整个树数据的层级 用于列的合并const getTreeLevel (arr: TreeType[]) {let maxLevel 0;(function callBack(arr, level) {level;maxLevel Math.max(level, maxLevel);for (let i 0; i arr.length; i) {let item arr[i];if (item.children item.children.length 0) {callBack(item.children, level);} else {delete item.children;}}})(arr, 0);return maxLevel;}onMounted(() {const list: TreeType[] []treeToList(state.tableData, list, null)rowLength.value list.length || 0let length getTreeLevel(JSON.parse(JSON.stringify(state.tableData)))if (length 2) {level.value length * 2} else {level.value 2}})return {…toRefs(state),rowLength,level}} }) /scriptstyle 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五、最终效果 因为这里我只是为了做个demo里面的Type还有公共的方法以及样式都是可以提取出来放到一个公共的文件里面。这个的话自己去完成。其实表格也不算复杂。 我是Etc.End。如果文章对你有所帮助能否帮我点个免费的赞和收藏。同时欢迎各位小伙伴一起学习一起成长WX:SH–TS ❤️ ✨ ⭐️