vue中使用table标签如何封装公共组件,rowspan, colspan配置

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>

 

代码简单,就不讲解了,如果有小伙伴不懂请关注本人维护的公众号,程序员蜗牛,感谢支持呀,目前还没有多少人,关注,关注后送学习资料。希望多多支持。你的支持,就是我分享工作小技能的动力。

推荐阅读更多精彩内容