Element的表格插槽
时间: 2024-05-01 08:23:07 浏览: 10
在Element中,表格组件提供了多个插槽(slot)来自定义表格的各个部分。下面是常用的插槽及其作用:
1. `header`:表格头部插槽,用于自定义表格头部内容。
2. `default`:表格内容插槽,用于自定义表格每一行的内容。
3. `expand`:展开行插槽,用于自定义展开行的内容。
4. `summary`:表格汇总行插槽,用于自定义表格汇总行的内容。
使用方法如下:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
<template slot="header">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</template>
<template slot-scope="scope">
<tr>
<td>{{ scope.row.name }}</td>
<td>{{ scope.row.age }}</td>
<td>{{ scope.row.address }}</td>
</tr>
</template>
<template #expand="{row}">
<div>{{row.description}}</div>
</template>
<template #summary="{sum}">
<tr>
<td>Total</td>
<td>{{sum.age}}</td>
<td></td>
</tr>
</template>
</el-table>
```
在上面的示例中,我们通过`header`插槽自定义了表格头部内容,通过`default`插槽自定义了表格每一行的内容,通过`expand`插槽自定义了展开行的内容,通过`summary`插槽自定义了表格汇总行的内容。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)