el-table-column当前行已经有背景,然后让第二行第一列为其他背景图
时间: 2023-10-28 22:26:13 浏览: 70
改变table中行的背景
你可以使用 `scoped slot` 来自定义 `el-table-column` 的渲染方式。具体做法是,在 `el-table-column` 上添加 `scopedSlots` 属性,然后在模板中使用 `slot-scope` 来访问数据。例如,你可以这样写:
```html
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<div v-if="scope.$index === 1 && scope.$columnIndex === 0" style="background-image: url('your-image-url');">
<!-- 这里放置自定义的内容 -->
</div>
<div v-else>
<!-- 如果不是第二行第一列,则按照默认方式渲染 -->
<el-button type="text" size="small">编辑</el-button>
<el-button type="text" size="small">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
```
在上面的例子中,我们针对第二行第一列使用了自定义的背景图,并放置了自定义的内容;而其它行和列则按照默认方式渲染。
阅读全文