el-table自定义行首行
时间: 2023-06-30 07:11:32 浏览: 77
你可以使用 `slot-scope` 来自定义行的内容。具体步骤如下:
1. 在 `el-table` 标签中添加 `slot-scope="props"` 属性。
2. 在 `el-table-column` 标签中添加 `label` 属性来设置列的标题。
3. 在 `el-table-column` 标签中添加 `slot-scope="scope"` 属性。
4. 在 `el-table-column` 标签中添加自定义的 HTML 元素来展示行的内容,可以使用 `scope.row` 来获取当前行的数据。
示例代码如下:
```html
<el-table :data="tableData" slot-scope="props">
<el-table-column label="姓名" width="180">
<template slot-scope="scope">
<div class="name">{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column label="年龄" width="180">
<template slot-scope="scope">
<div class="age">{{ scope.row.age }}</div>
</template>
</el-table-column>
</el-table>
```
在上述示例中,我们使用 `slot-scope` 属性来获取 `props` 对象,该对象包含了以下属性:
- `props.$index`:当前行的索引。
- `props.$rowIndex`:当前行在整个表格中的索引。
- `props.$columnIndex`:当前列在整个表格中的索引。
- `props.store.states.fixedColumns`:当前固定列的状态。
- `props.store.states.isComplex`:当前表格是否包含嵌套表格。
- `props.store.states.hoverRow`:当前鼠标所在行的索引。
- `props.store.states.currentRow`:当前选中的行的数据。
然后,我们在 `el-table-column` 标签中使用 `slot-scope` 属性来获取 `scope` 对象,该对象包含了以下属性:
- `scope.row`:当前行的数据。
- `scope.column`:当前列的配置信息。
- `scope.$index`:当前行的索引。
最后,我们使用自定义的 HTML 元素来展示行的内容,例如上述示例中的 `<div>` 元素。