element中的table中的column行高解决以及表格循环

最新推荐文章于 2025-06-06 14:51:07 发布

星星上的猫.

最新推荐文章于 2025-06-06 14:51:07 发布

阅读量516

点赞数

CC 4.0 BY-SA版权

分类专栏：问题文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45075981/article/details/121176555

问题专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue表格组件中通过代码调整行高为0和单元格内边距为2像素，同时展示如何将数组对象的键作为表头并显示其值，包括使用v-for遍历和slot特性。

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

在table中加上两行代码，可以i自定义行和列的高度和内边距

:row-style="{height: '0'}"
:cell-style="{padding: '2px'}"

其中 tableTitle.titleList是arr中的每一个对像的键，把每一个对象键当作表头，把键值当作内容

 <Table
        :data="arr"
        size="small"
        border
        v-if="(arr.length)"
        style="width: 100%"
        min-height="200px"
        max-height="390px"
        :row-style="{height: '0'}"
        :cell-style="{padding: '2px'}">
        <TableColumn v-for="(item,index) in tableTitle.titleList" :key="item.id"  align="left" prop="scope"  style="position: relative ;" min-width="105" >
          <template slot="header" slot-scope="scope">
              <div class="rds-header"> {{item}}</div>
          </template>
          <template slot-scope="scope">
            <div  class="rds-show">
              <div class="rds-show-copy" @click.stop="copyText(scope.row,item)">复制</div>
              {{scope.row[item]}}
            </div>
          </template>
        </TableColumn>
      </Table>