h5原生table封装

最新推荐文章于 2023-12-14 01:03:19 发布

Running_FE

最新推荐文章于 2023-12-14 01:03:19 发布

阅读量863

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/Running_FE/article/details/114013477

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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