h5原生table封装

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

Running_FE

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

阅读量792

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Running_FE/article/details/114013477

版权

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

摘要由CSDN通过智能技术生成

<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-