要实现
虚拟表格，可以在 `el-
table` 组件中添加 `:row-height` 属性，来指定每行的高度，然后再添加 `:height` 属性，来指定
表格的高度。接着，可以在 `el-
table` 中添加 `slot-scope` 属性，来自定义
表格的每行内容。最后，在 `el-
table` 中添加 `:highlight-current-row` 属性，来高亮展示当前行。
以下是一个示例代码：
```html
<template>
<el-
table :data="
tableData" :row-height="rowHeight" :height="
tableHeight" :highlight-current-row="false">
<el-
table-column prop="name" label="姓名"></el-
table-column>
<el-
table-column prop="age" label="年龄"></el-
table-column>
<el-
table-column prop="address" label="地址"></el-
table-column>
<template slot-scope="{ row }">
<div class="
table-row" :style="{ height: rowHeight + 'px' }">
<span>{{ row.name }}</span>
<span>{{ row.age }}</span>
<span>{{ row.address }}</span>
</div>
</template>
</el-
table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, address: '北京市' },
{ name: '李四', age: 25, address: '上海市' },
{ name: '王五', age: 30, address: '广州市' },
{ name: '赵六', age: 35, address: '深圳市' }
],
rowHeight: 50,
tableHeight: 200
}
}
}
</script>
<style>
.
table-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
border-bottom: 1px solid #f0f0f0;
}
</style>
```
在上述代码中，我们指定了每行高度为 `50px`，
表格高度为 `200px`，并且自定义了每行内容的展示方式。同时，我们也添加了一些样式来美化
表格。
8968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
