element ui 怎么调整table的行高

在Element UI中,调整Table的行高可以通过CSS覆盖默认的样式来实现。你可以为Table添加一个自定义类名,然后在CSS中指定trheight属性来调整行高。

以下是一个简单的例子:

  1. 在你的Vue组件中,给<el-table>添加一个自定义的类名,比如custom-table-class

    
    <template>
      <el-table
        :data="tableData"
        class="custom-table-class"
        style="width: 100%">
        <!-- 你的 <el-table-column> 定义在这里 -->
      </el-table>
    </template>

  2. 在你的CSS文件中,指定.custom-table-class trheight属性来调整行高:

    
    <style>
    .custom-table-class tr {
      height: 60px; /* 你想要的行高 */
    }
    </style>

    上面不起作用就用这一段:确保这段CSS被加载,行高就会按照你指定的值来显示。如果你使用了scoped样式,你可能需要使用深度选择器 >>> 或 /deep/ 来确保你的样式能够穿透组件边界。

    
    <style scoped>
    .custom-table-class /deep/ tr {
      height: 60px; /* 你想要的行高 */
    }
    </style>

GitHub 加速计划 / eleme / element
13
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:19 天前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐