h5原生table封装

最新推荐文章于 2024-06-26 15:41:00 发布

原创

最新推荐文章于 2024-06-26 15:41:00 发布 · 891 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

这篇博客探讨了如何在Vue项目中封装H5原生table，旨在寻找最佳实践。作者请求社区分享有关有效引入和使用表格组件的建议。

<template>
  <table class='tableCom'
         width="100%"
         align="center"
         cellpadding="0"
         cellspacing="0">
    <thead>
      <tr align='center'
          class="thead_tr">
        <td v-for="(item,ind) in tableHead"
            :key="ind"
            :width='item.width'
            :style="{paddingLeft: item.paddingLeft,paddingRight: item.paddingRight}"
            :align="item.alignHeader || 'center'"
            class="thead_td">{
  
  {item.text}}</td>
      </tr>
    </thead>
    <tbody v-if='tableData.length'>
      <tr v-for="(item,index) in tableData"
          :key="index"
          :class="['tbody_tr', bt_none ? 'bt_none' : '']">
        <td v-for="(content,i) in tableHead"
            :key="i"
            :width='content.width'
            :style="{paddingLeft: content.paddingLeft, paddingRight: content.paddingRight}"
            :align="content.align || 'center'"