element-ui表格图片
时间: 2023-11-14 18:09:41 浏览: 148
element-ui表格支持在单元格中显示图片,可以通过自定义列模板来实现。具体步骤如下:
1. 在表格列定义中添加一个自定义列,指定该列的 `scopedSlots` 属性为一个对象,对象的 key 为 `default`,value 为一个函数,该函数返回一个 VNode 对象,用于渲染该列的内容。
2. 在该函数中,可以通过 `scope.row` 获取当前行的数据,然后根据数据中的图片地址生成一个 `img` 标签,并将其作为 VNode 对象的子节点返回。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="头像">
<template v-slot:default="scope">
<img :src="scope.row.avatar" style="width: 50px; height: 50px;">
</template>
</el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', avatar: 'https://example.com/avatar1.jpg', age: 20 },
{ name: '李四', avatar: 'https://example.com/avatar2.jpg', age: 25 },
{ name: '王五', avatar: 'https://example.com/avatar3.jpg', age: 30 },
]
}
}
}
</script>
```
阅读全文