前端vue自定义table 表格 表格组件 Excel组件
快速实现vue uni-app自定义table 表格 表格组件 Excel组件,扩充性好,可切换四宫格 九宫格 十二宫格; 阅读全文下载完整代码请关注微信公众号: 前端组件开发
效果图如下:

代码如下:
# 自定义table 表格 表格组件 Excel组件
#### 使用方法如下
#### HTML代码部分
```html
<template>
<view class="content">
<div class="table">
<table>
<!-- 第一行 -->
<tr>
<!-- rowspan行高: 2 colspan列高: 2 -->
<td rowspan="2" colspan="2">项目</td>
<td colspan="2">{{"2021"}}</td>
<td colspan="2">{{"2022"}}</td>
<td colspan="2">{{"2023"}}</td>
</tr>
<!-- 第二行 -->
<tr>
<td>指标值</td>
<td>同比</td>
<td>指标值</td>
<td>同比</td>
<td>指标值</td>
<td>同比</td>
</tr>
<!-- 第三行 -->
<tr>
<td rowspan="5">公司历年情况</td>
<td>营业金额(万元)</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
</tr>
<!-- 第四行 -->
<tr>
<td>营业税额(万元)</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
</tr>
<!-- 第五行 -->
<tr>
<td>营业数量(张)</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
</tr>
<!-- 第六行 -->
<tr>
<td>供应商数量(个)</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
</tr>
<!-- 第七行 -->
<tr>
<td>供应商稳定性(%)</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
<td>{{"Num"}}</td>
<td>{{"Yoy"}}</td>
</tr>
</table>
</div>
</view>
</template>
```
#### JS代码 (引入组件 填充数据)
```javascript
<script>
export default {
data() {
return {
}
},
onLoad() {
}
}
</script>
```
#### CSS
```CSS
<style scoped>
.content {
display: flex;
flex-direction: column;
}
.table {
margin: 0px 10px;
width: calc(100vw - 20px);
text-align: center;
}
.table table {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
/* 设置边缘间距0 */
border-spacing: 0;
/* 用于表格属性, 表示表格的两边框合并为一条 */
border-collapse: collapse
}
.table table td {
border-left: 1px solid #000;
border-top: 1px solid #000;
text-align: center;
font-size: 12px;
font-weight: bold;
border-right: 1px solid #000;
}
.table table tr td {
width: 12.5%;
}
.table table tr:first-child {
}
.table table tr:nth-child(2) {
}
</style>
```
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库