前端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>
```
