1,背景: 项目中用到显示表格的功能，但是有多个表格，并且有合并单元格的情况，如何用vue把table封装成组件使用。
如图：
image.png
如果用div排版很麻烦，如果用table标签写成死的，每个都要写很多，冗余代码很多。所以就有下面的方法
2，解决方法：
采用数据与结构分离的方式，把table,抽象成组件，数据写在json中。
3，代码：
首先贴一下结构代码，抽离成父组件
<div class="table-to-json-wrapper">
<table border="1" align="center">
<tr height="40">
<th v-for="(item, index) in tableDataHead" :key="index" :width="item.width" :colspan="item.colspan ? item.colspan : 1">{{ item.value }}</th>
</tr>
<tr v-for="(item, index) in tableData" :key="index" border="1" :style="{'textAlign': item.textAlign ? item.textAlign: 'center'}">
<td v-if="item.key1" v-html="item.key1.text" :rowspan="item.key1.rowspan ? item.key1.rowspan : 1" :colspan="item.key1.colspan ? item.key1.colspan: 1"></td>
<td v-if="item.key2" v-html="item.key2.text" :rowspan="item.key2.rowspan ? item.key2.rowspan : 1" :colspan="item.key2.colspan ? item.key2.colspan: 1"></td>
<td v-if="item.key3" v-html="item.key3.text" :rowspan="item.key3.rowspan ? item.key3.rowspan : 1" :colspan="item.key3.colspan ? item.key3.colspan: 1"></td>
<td v-if="item.key4" v-html="item.key4.text" :rowspan="item.key4.rowspan ? item.key4.rowspan : 1" :colspan="item.key4.colspan ? item.key4.colspan: 1"></td>
<td v-if="item.key5" v-html="item.key5.text" :rowspan="item.key5.rowspan ? item.key5.rowspan : 1" :colspan="item.key5.colspan ? item.key5.colspan: 1"></td>
<td v-if="item.key6" v-html="item.key6.text" :rowspan="item.key6.rowspan ? item.key6.rowspan : 1" :colspan="item.key6.colspan ? item.key6.colspan: 1"></td>
<td v-if="item.key7" v-html="item.key7.text" :rowspan="item.key7.rowspan ? item.key7.rowspan : 1" :colspan="item.key7.colspan ? item.key7.colspan: 1"></td>
</tr>
</table>
</div>
js部分，接受子组件传值
export default {
name: "TableToJson",
props: {
tableDataHead: {
type: Array,
default: () => {
return []
}
},
tableData: {
type: Array,
default: () => {
return []
}
}
}
}
css 代码定义表格样式
<style scoped lang="scss">
@import "../styles/variables";
table {
table-layout:fixed;
border-collapse: collapse;
margin: 0 auto;
text-align: center;
width: 100%;
overflow: hidden;
}
table td, table th
{
border: 1px solid #cad9ea;
color: #666;
height: 30px;
word-wrap:break-word;
}
table th
{
background-color: $base-color;
color: white;
}
table tr:nth-child(odd)
{
background: #fff;
}
table tr:nth-child(even)
{
background: $bg-color;
}
</style>
tableDataHead 为标题th数据，tableData 为表格td内容
然后新建一个json.js文件专门存表格数据
const dutyArr = [{
width: '130',
colspan: 2,
value: '保障责任'
}, {
width: '30',
value: '项目'
}, {
width: '40',
value: '保障人群'
}, {
width: '24',
value: '起付线'
}, {
width: '24',
value: '给付比例',
}, {
width: '24',
value: '保额'
}]
const dutyContentArr = [
{
"key1": {
rowspan: 1,
text: '责任一：住院补充医疗保障'
},
"key2": {
rowspan: 1,
text: '被保险人因<b>疾病或意外</b>按规定在定点医疗机构<b>住院</b>治疗发生的个人负担的、符合基本医疗保险和大病医疗保险支付范围内的医疗费用（即医保目录内<b>甲类及乙类费用，超限额以上费用除外</b>）'
},
"key3": {
rowspan: 1,
text: '住院'
},
"key4": {
rowspan: 1,
text: '所有参保人'
},
"key5": {
rowspan: 3,
text: '1.8万'
},
"key6": {
rowspan: 1,
text: '70%'
},
"key7": {
rowspan: 3,
text: '150万'
},
},
{
"key1": {
rowspan: 2,
text: '责任二：门诊慢特病补充医疗保障'
},
"key2": {
rowspan: 2,
text: '被保险人<b>因门诊慢特病</b>按规定在定点医疗机构门诊治疗发生的个人负担的、符合基本医疗保险和大病医疗保险支付范围内的医疗费用（即医保目录内<b>甲类及乙类费用，超限额以上费用除外</b>）'
},
"key3": {
rowspan: 2,
text: '门诊慢特病'
},
"key4": {
rowspan: 1,
text: '非既往症人群'
},
"key6": {
rowspan: 1,
text: '70%'
},
},
{
"key4": {
rowspan: 1,
text: '既往症人群'
},
"key6": {
rowspan: 1,
text: '40%'
},
},
{
'key1': {
rowspan: 1,
text: '责任三：医保目录外住院合理药品补充医疗保障'
},
'key2': {
rowspan: 1,
text: '被保险人因<b>疾病或意外</b>按规定在定点医疗机构<b>住院</b>，在治疗医院（不含药店购买）发生的，合理治疗所需的<b>医保目录外且已列入正面清单的药品费用</b>'
},
'key3': {
rowspan: 1,
text: '住院'
},
'key4': {
rowspan: 1,
text: '所有参保人'
},
'key5': {
rowspan: 1,
text: '2万'
},
'key6': {
rowspan: 1,
text: '60%'
},
'key7': {
rowspan: 1,
text: '100万'
}
},
{
'key1': {
rowspan: 2,
text: '责任四：特殊药品、特殊医用耗材医疗保障'
},
'key2': {
rowspan: 2,
text: '被保险人因患恶性肿瘤等重特大疾病按规定在定点医疗机构诊疗，由具有该类疾病诊疗资质的责任医师实施治疗所发生的特药/特材费用（需符合指定特药/特材及<b>适应症</b>）'
},
'key3': {
rowspan: 2,
text: '住院及指定药店'
},
'key4': {
rowspan: 1,
text: '非既往症人群'
},
'key5': {
rowspan: 2,
text: '2万'
},
'key6': {
rowspan: 1,
text: '70%'
},
'key7': {
rowspan: 2,
text: '50万'
}
},
{
"key4": {
rowspan: 1,
text: '既往症人群'
},
"key6": {
rowspan: 1,
text: '40%'
}
},
{
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '<b>等待期：</b>对2021年首年参保及连续参保本产品的不设待遇等待期，以后各年新增参保的均有2个月等待期。'
}
},
{
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '<b>适用人群：</b>青岛市城镇职工基本医疗保险、城乡居民基本医疗保险参保人员，不设置年龄、既往病史、健康状况、职业类型等投保限制条件。'
}
},
{
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '<b>起付线：</b>本保险起付线累计年度均为<b>自然年度</b>（1月1日至12月31日）。'
}
},
{
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '<b>缴费期间：</b>2021年5月9日0时起至2021年7月8日24时止'
}
}, {
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '<b>保障期间：</b>2021年7月1日0时起至2022年6月30日24时止'
}
}, {
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '<b>保费：</b>139元/人（人民币壹佰叁拾玖元整)'
}
}
]
export {
dutyArr,
dutyContentArr
}
rowspan, 合并行，colspan合并列。 代码也比较简单，但是这种方式，结构与数据抽离，会非常方便用于一个项目有多处出现表格的情况。第二，减少代码冗余。减少项目体积。
另外不懂，rowspan， colspan 的童鞋，可以运行这个小demo,可以帮助理解/
<html>
<head>
</head>
<table border= "1 " width= "200 " >
<tr>
<td colspan="4" >ss
</td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "rowspan="2"> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% " rowspan="3"> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% " colspan="2" > </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
</table>
</html>
代码简单，就不讲解了，如果有小伙伴不懂请关注本人维护的公众号，程序员蜗牛，感谢支持呀，目前还没有多少人，关注，关注后送学习资料。希望多多支持。你的支持，就是我分享工作小技能的动力。
网友评论