Vxetable 递归多级表头

ops/2024/10/19 10:16:08/

在对vxetable 进行二次封装的时候,多级表头也是需要考虑进去的,所以需要封装一个递归列组件进行多级表头的一个渲染。

// my-table.vue
<vxe-tableref="xTable":key="currentKey":data="pageData?.list || []"show-header-overflow="tooltip"show-overflow="tooltip"border="inner":row-style="rowStyle"@current-change="onCurrentChange"><!-- 普通列 --><template v-for="(tOptions) of tableNormalOptions" :key="tOptions.prop"><!-- 单表头 --><vxe-columnv-if="!tOptions.child || tOptions.child?.length===0":title="tOptions.showName":field="tOptions.uniqueKey":width="tOptions.width ? tOptions.width : ''":min-width="tOptions.minWidth ? tOptions.minWidth : '100'":header-align="tOptions.headerAlign ? tOptions.headerAlign : 'center'":align="tOptions.align ? tOptions.align : 'center'":fixed="tOptions.fixed ? tOptions.fixed : ''":sortable="tOptions.sortable ? true : false":sort-by="tOptions.sortable ? tOptions.sortBy : ''":resizable="tOptions.resizable !== null ? tOptions.resizable : true":visible="tOptions.visible !== null ? tOptions.visible : false":filters="tOptions.filters"><!-- 自定义列内容格式 --><template v-if="tOptions.slot" #default="scope"><t-buttonclass="hyperlink-button":text="`${isNoVal(scope.row[tOptions.uniqueKey])}`"type="text"@click="openNewWindow(tOptions.uniqueKey)"></t-button></template><!-- 默认展示格式(此处做了判空处理, 如果为空, 则展示小短横线) --><template v-else #default="scope">{{ `${isNoVal(scope.row[tOptions.uniqueKey])}` }}</template></vxe-column><!-- 多表头 --><cross-table-vxe-colgroupv-else:data="tOptions":all-sheet-resources="allSheetResources"></cross-table-vxe-colgroup></template></vxe-table>
// cross-table-vxe-colgroup.vue
<template><vxe-colgroup:title="data.name":header-align="data?.headAlign||'center'"><templatev-for="item in data.child":key="item.prop"><vxe-columnv-if="!item.child || item.child?.length ===0":title="item.name":field="item.uniqueKey":width="item.width ? item.width : ''":min-width="item.minWidth ? item.minWidth : '100'":header-align="item.headerAlign ? item.headerAlign : 'center'":align="item.align ? item.align : 'center'":fixed="item.fixed ? item.fixed : ''":sortable="item.sortable ? true : false":sort-by="item.sortable ? item.sortBy : ''":resizable="item.resizable ? item.resizable : false":visible="item.visible !== null ? item.visible : false":filters="item.filters"><!-- 默认展示格式(此处做了判空处理, 如果为空, 则展示小短横线) --><template  #default="scope">{{ scope.row[item.uniqueKey]}</template></vxe-column><cross-table-vxe-colgroup v-else :data="item"></cross-table-vxe-colgroup></template></vxe-colgroup>
</template>


http://www.ppmy.cn/ops/45321.html

相关文章

Python | Leetcode Python题解之第105题从前序与中序遍历序列构造二叉树

题目&#xff1a; 题解&#xff1a; class Solution:def buildTree(self, preorder: List[int], inorder: List[int]) -> TreeNode:if not preorder:return Noneroot TreeNode(preorder[0])stack [root]inorderIndex 0for i in range(1, len(preorder)):preorderVal pr…

如何恢复被盗的加密货币?

本世纪&#xff0c;网络犯罪的首要目标是加密货币。 这要归功于加密货币的日益普及和价值&#xff0c;网络犯罪分子已经认识到经济收益的潜力&#xff0c;并将重点转向利用这种数字资产中的漏洞。 在今天的文章中&#xff0c;我们将讨论加密货币恢复和被盗加密货币恢复。 我们…

Idea可以运行Python!

Idea可以运行Python&#xff01; 以下这篇文章为基础教程&#xff1a; idea编写运行python_idea创建python项目-CSDN博客

【LeetCode算法】第94题:二叉树的中序遍历

目录 一、题目描述 二、初次解答 三、官方解法 四、总结 一、题目描述 二、初次解答 1. 思路&#xff1a;二叉树的中序遍历。访问二叉树的左子树&#xff0c;再访问二叉树的根节点&#xff0c;最后访问二叉树的右叉树。 2. 代码&#xff1a; void order(struct TreeNode* r…

Clickhouse 计算引擎架构 —— Clickhouse 架构篇(三)

文章目录 前言ClickHouse计算引擎的架构简介与设计思想架构简介设计思想 火山模型向量化引擎向量化引擎的实现方式向量化引擎的前提 计算引擎如何影响查询速度总结 前言 相比较于存储引擎的精妙设计&#xff0c;ClickHouse的计算引擎一直是一个争议非常大的话题。对ClickHouse…

专业的Java工程管理软件源码:详尽的项目模块及其功能点清单

在工程项目管理软件领域&#xff0c;我们致力于提供全过程、全方位的综合管理解决方案。该软件覆盖了建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营的各个环节&#xff0c;确保项目管理的全面性和高效性。 工程项目管理软件包含…

TS中的InstanceType函数和Typeof 操作符

InstanceType函数 简介 instancetype函数&#xff1a;该函数返回&#xff08;构造&#xff09; 由某个构造函数构造出来的实例类型组成的类型。 常见使用 场景一 【vue中的instanceType用法】父组件用ref获取子组件时&#xff0c;通过 instanceType获取子组件的类型 <!-- …

【NumPy】全面解析flatten函数:简化数组变平操作

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…