element ui 表格 ，行背景如何添加图片？

Question

这是表格现在的样式

我想设置背景为图片达到下图效果，这个要怎么写呢？

官方文档的几个样式好像不支持

Answer 1

在 Element UI 表格中，你可以通过自定义 row-class-name 属性来实现对表格行的样式控制，包括背景颜色、字体颜色、边框等等。

要在表格行中添加背景图片，你可以通过 CSS 样式来实现。具体步骤如下：

1、在 CSS 文件中定义一个类，用来设置背景图片，例如：

.bg-image {
  background-image: url('your-image-url');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

2、在表格中设置 row-class-name 属性，并将其绑定到一个函数，函数的返回值是应用于每行的类名，例如：

<template>
  <el-table :data="tableData" :row-class-name="rowClassName">
    ...
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 22 },
        { name: 'Lisa', age: 28 },
        { name: 'Tom', age: 26 }
      ]
    }
  },
  methods: {
    rowClassName(row, index) {
      if (row.name === 'Lisa') {
        return 'bg-image'; // 对 Lisa 的行应用背景图片样式
      } else {
        return ''; // 其他行不应用样式
      }
    }
  }
}
</script>

在上面的示例中，我们定义了一个 rowClassName 函数，根据行数据判断是否应该应用样式。如果当前行的 name 属性为 'Lisa'，则将其样式设置为 'bg-image'，也就是应用背景图片。对于其他行，样式为空，不应用背景图片。

通过这种方式，你可以在 Element UI 表格中为特定行添加背景图片。需要注意的是，当表格中的数据量很大时，这种方式可能会对性能产生一定影响，因为需要为每行设置类名。