Element UI 中的Table表格组件自定义行高与整个表格自适应高度-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI 中的Table表格组件自定义行高与整个表格自适应高度。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：

elementui设置表格行高,vue实战,vue,elementui

代码：

<template>
    <!--Element UI 中的Table表格组件自定义行高与整个表格自适应高度-->
    <div>
        <el-table :header-row-style="{height:'30px'}" :header-cell-style="{background:'#f5f7fa',padding:'0px'}" :row-style="{height:'30px'}" :cell-style="{padding:'0px'}" size='small' border style="width: 100%" :data="tableData" stripe height="calc(100vh - 150px)" :highlight-current-row='true'>
            <el-table-column type="index" label="行号" align="center" width="50" />
            <el-table-column  prop="id" label="编码" align="center" width="70" />
            <el-table-column  prop="name" label="姓名" align="left" header-align="center" width="100"/>
            <el-table-column  prop="address" label="地址" align="left" header-align="center" width="150"/>
        </el-table>
    </div>
</template>

<script>
export default {
    name: "Demo",
    data(){
        return {
            tableData: [
                {
                    id: '01',
                    name: '小红',
                    address: '北京'
                },
                {
                    id: '02',
                    name: '小李',
                    address: '上海'
                },
                {
                    id: '03',
                    name: '小明',
                    address: '广州'
                }
            ]
        }
    }
}
</script>

<style scoped>

</style>

解析：

1、:header-row-style="{height:'30px'}" 设置表格列标题的高度为30像素。

2、:header-cell-style="{background:'#f5f7fa',padding:'0px'}" 设置表格列标题的背景颜色。

3、:row-style="{height:'30px'}" 设置每行的高度为30像素。

4、height="calc(100vh - 150px)" 设置整个表格的高度。因为要自适应所以这个高度要用calc()函数计算一下。重点是100vh，这个表示当前视图100%的高度，类似与width=100%，这个值不是固定的，可根据窗口的大小自动调整，再减去一个固定值就是你要的高度了。文章来源地址https://www.toymoban.com/news/detail-527112.html

到了这里，关于Element UI 中的Table表格组件自定义行高与整个表格自适应高度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！