vue中使用table标签如何封装公共组件，rowspan, c

作者: 前端蜗牛老师 | 来源:发表于2021-04-22 10:59 被阅读0次

vue中使用table标签如何封装公共组件，rowspan, c
vue周期函数
组件封装时判断slot是否存在！！
elementui中el-table-column里显示两个后台
使用element-ui二次封装table组件（支持合并单元格，
通过vue封装弹窗组件/vue封装组件的方式选择依据
(17.06.21)Vue组件、组件的定义和使用、组件之间的数据
Bootstrap-table请求服务器数据
使用vue-pdf在Vue中进行pdf的预览下载
vue封装可编辑表格

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>

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

vue中使用table标签如何封装公共组件，rowspan, c
1,背景: 项目中用到显示表格的功能，但是有多个表格，并且有合并单元格的情况，如何用vue把table封装成组件使...
vue周期函数
1.vue中的组件 -vue中所有页面由组件组成-vue可以将公共的部分封装成组件在其他地方使用-App.vue是...
组件封装时判断slot是否存在！！
vue组件封装常用到slot标签，为了不影响组件内部的样式通常使用：
elementui中el-table-column里显示两个后台
使用elementui组件库中的table表格组件标签时，
使用element-ui二次封装table组件（支持合并单元格，
使用vue+elementui封装table。组件中提供了含有分页的表格，支持filter，支持render，支持...
通过vue封装弹窗组件/vue封装组件的方式选择依据
通过vue封装弹窗组件大部分vue对效果的封装，有3个方式：普通公共组件封装：涉及东西，父子组件之间的传值和...
(17.06.21)Vue组件、组件的定义和使用、组件之间的数据
Vue组件组件 Component 定义组件公共的组件使用组件 ...
Bootstrap-table请求服务器数据
标签（空格分隔）： js Bootstrap table 使用 html中要引入bootstrap-table.c...
使用vue-pdf在Vue中进行pdf的预览下载
1、使用npm 下载vue-pdf 2、封装pdf组件 3、在组件中具体使用封装的pdf组件 4、打包的时候会报错...
vue封装可编辑表格
1.组件UsualiyTable.js部分。 import Vue from 'vue'; /**封装公共可编辑表...