elementui table嵌套展示图片
时间: 2023-07-19 19:17:50 浏览: 49
要在 ElementUI 的表格中嵌套展示图片,你可以使用自定义列模板的方式来实现。具体步骤如下:
1. 首先需要在表格的列定义中添加一列用于展示图片,例如:
```javascript
columns: [
{
label: '姓名',
prop: 'name'
},
{
label: '头像',
prop: 'avatar',
type: 'image'
}
]
```
其中,`type` 属性的值为 `image`,表示该列要展示图片。
2. 接着,在表格的 `scopedSlots` 属性中定义一个自定义列模板,例如:
```javascript
<template slot="image" slot-scope="scope">
<img :src="scope.row.avatar" alt="avatar" style="width: 50px; height: 50px;">
</template>
```
其中,`slot` 属性的值为刚才定义的列的 `prop` 值,`slot-scope` 属性指定了模板作用域的变量名。
3. 最后,在表格中配置该模板的使用,例如:
```javascript
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="头像" prop="avatar" type="image">
<template slot-scope="scope">
<img :src="scope.row.avatar" alt="avatar" style="width: 50px; height: 50px;">
</template>
</el-table-column>
</el-table>
```
这样,就可以在 ElementUI 的表格中嵌套展示图片了。