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

最新推荐文章于 2024-07-15 15:15:49 发布

转载最新推荐文章于 2024-07-15 15:15:49 发布 · 1k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/lag_csdn/article/details/124713276?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-124713276-blog-126517849.pc_relevant_aa2&depth_1-utm_source=distribute.pc_relevant_t0.non

文章标签：

#vue.js #javascript #前端

不比比，直接上代码

<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://blog.youkuaiyun.com/lag_csdn/article/details/124713276

我的问题出现第4条，我是直接在mounted里修改的，但是不起作用