el-table row
时间: 2023-11-07 17:47:52 浏览: 370
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
el-table row指的是Element UI中的表格(table)的行(row)组件。在ElTable中,每一行数据都由el-table-row来表示。
el-table-row组件可以用来展示表格的每一行数据,它接受一个数据对象作为prop,然后根据数据对象的属性来渲染表格中的每一列。
例如,可以通过以下方式使用el-table-row组件:
```
<el-table :data="tableData">
<!-- 其他列 -->
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<!-- 其他列 -->
<!-- 行组件 -->
<el-table-column label="操作">
<template slot-scope="scope">
<el-table-row :data="scope.row">
<!-- 行内的其他列 -->
<el-button>Edit</el-button>
<el-button>Delete</el-button>
<!-- 行内的其他列 -->
</el-table-row>
</template>
</el-table-column>
</el-table>
```
在上面的代码中,`tableData`是要展示的表格数据,`name`和`age`是数据对象的属性,对应表格中的姓名和年龄列。在操作列中使用了el-table-row组件来展示操作按钮,并通过`:data="scope.row"`将当前行的数据传递给el-table-row组件。这样就可以在行内展示额外的操作列。
需要注意的是,el-table-row必须放在el-table-column的template中使用,并且通过slot-scope="scope"可以访问到当前行的数据。
阅读全文