1,背景: 项目中用到显示表格的功能，但是有多个表格，并且有合并单元格的情况，如何用vue把table封装成组件使用。
如图：
image.png
如果用div排版很麻烦，如果用table标签写成死的，每个都要写很多，冗余代码很多。所以就有下面的方法
2，解决方法：
采用数据与结构分离的方式，把table,抽象成组件，数据写在json中。
3，代码：
首先贴一下结构代码，抽离成父组件
{{ item.value }}
js部分，接受子组件传值
export default {
name: "TableToJson",
props: {
tableDataHead: {
type: Array,
default: () => {
return []
}
},
tableData: {
type: Array,
default: () => {
return []
}
}
}
}
css 代码定义表格样式
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: '被保险人因疾病或意外按规定在定点医疗机构住院治疗发生的个人负担的、符合基本医疗保险和大病医疗保险支付范围内的医疗费用（即医保目录内甲类及乙类费用，超限额以上费用除外）'
},
"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: '被保险人因门诊慢特病按规定在定点医疗机构门诊治疗发生的个人负担的、符合基本医疗保险和大病医疗保险支付范围内的医疗费用（即医保目录内甲类及乙类费用，超限额以上费用除外）'
},
"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: '被保险人因疾病或意外按规定在定点医疗机构住院，在治疗医院（不含药店购买）发生的，合理治疗所需的医保目录外且已列入正面清单的药品费用'
},
'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: '被保险人因患恶性肿瘤等重特大疾病按规定在定点医疗机构诊疗，由具有该类疾病诊疗资质的责任医师实施治疗所发生的特药/特材费用（需符合指定特药/特材及适应症）'
},
'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: '等待期：对2021年首年参保及连续参保本产品的不设待遇等待期，以后各年新增参保的均有2个月等待期。'
}
},
{
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '适用人群：青岛市城镇职工基本医疗保险、城乡居民基本医疗保险参保人员，不设置年龄、既往病史、健康状况、职业类型等投保限制条件。'
}
},
{
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '起付线：本保险起付线累计年度均为自然年度（1月1日至12月31日）。'
}
},
{
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '缴费期间：2021年5月9日0时起至2021年7月8日24时止'
}
}, {
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '保障期间：2021年7月1日0时起至2022年6月30日24时止'
}
}, {
textAlign: 'left',
"key1": {
rowspan: 1,
colspan: 7,
text: '保费：139元/人（人民币壹佰叁拾玖元整)'
}
}
]
export {
dutyArr,
dutyContentArr
}
rowspan, 合并行，colspan合并列。 代码也比较简单，但是这种方式，结构与数据抽离，会非常方便用于一个项目有多处出现表格的情况。第二，减少代码冗余。减少项目体积。
另外不懂，rowspan， colspan 的童鞋，可以运行这个小demo,可以帮助理解/
ss
代码简单，就不讲解了，如果有小伙伴不懂请关注本人维护的公众号，程序员蜗牛，感谢支持呀，目前还没有多少人，关注，关注后送学习资料。希望多多支持。你的支持，就是我分享工作小技能的动力。