<template> <el-container style="min-height: 100vh"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="考核指标" width="150"></el-table-column> <el-table-column prop="date" label="具体事项(原)" width="150"></el-table-column> <el-table-column label="具体事项(新)"> <el-table-column prop="province" label="考核要点" width="120"></el-table-column> <el-table-column prop="city" label="计分方法" width="120"></el-table-column> <el-table-column prop="address" label="考核目标" width="300"></el-table-column> </el-table-column> <el-table-column prop="date" label="考核周期" width="150"></el-table-column> </el-table> </el-container> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-08', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-06', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-07', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }] } } } </script>将这些代码的表格设置为铺满全屏
时间: 2024-03-20 16:44:55 浏览: 70
element中el-container容器与div布局区分详解
可以通过在 `<el-container>` 上设置 `height` 为 `100vh` 来让表格铺满全屏,修改后的代码如下:
```html
<template>
<el-container style="height: 100vh">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="考核指标" width="150"></el-table-column>
<el-table-column prop="date" label="具体事项(原)" width="150"></el-table-column>
<el-table-column label="具体事项(新)">
<el-table-column prop="province" label="考核要点" width="120"></el-table-column>
<el-table-column prop="city" label="计分方法" width="120"></el-table-column>
<el-table-column prop="address" label="考核目标" width="300"></el-table-column>
</el-table-column>
<el-table-column prop="date" label="考核周期" width="150"></el-table-column>
</el-table>
</el-container>
</template>
```
其中,`style="height: 100vh"` 设置了容器的高度为视窗高度。
阅读全文