效果圖：
代碼：
<template>
<!--Element UI 中的Table表格組件自定義行高與整個(gè)表格自適應(yīng)高度-->
<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="行號(hào)" 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'}" 設(shè)置表格列標(biāo)題的高度為30像素。
2、:header-cell-style="{background:'#f5f7fa',padding:'0px'}" 設(shè)置表格列標(biāo)題的背景顏色。
3、:row-style="{height:'30px'}" 設(shè)置每行的高度為30像素。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-527112.html
4、height="calc(100vh - 150px)" 設(shè)置整個(gè)表格的高度。因?yàn)橐赃m應(yīng)所以這個(gè)高度要用calc()函數(shù)計(jì)算一下。重點(diǎn)是100vh，這個(gè)表示當(dāng)前視圖100%的高度，類(lèi)似與width=100%，這個(gè)值不是固定的，可根據(jù)窗口的大小自動(dòng)調(diào)整，再減去一個(gè)固定值就是你要的高度了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-527112.html
到了這里，關(guān)于Element UI 中的Table表格組件自定義行高與整個(gè)表格自適應(yīng)高度的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
