Vue2中如何在style部分传入data变量设置表格选中行样式

算力阿峰

2026-8-19

Vue2中给表格选中行动态设置背景色的解决方案

方法1：动态绑定class（推荐）

Vue的scoped样式无法在编译阶段直接插入data变量，最直接的方式是在表格组件内部给行动态绑定class，结合父组件传递的选中索引实现高亮：

父组件（首页）将选中索引传给表格组件：

<template>
  <TableComponent :selected-index="selected.index" />
</template>

<script>
export default {
  data() {
    return {
      selected: {
        index: 2
      }
    }
  }
}
</script>

表格组件内给每行绑定判断逻辑，添加高亮class：

<template>
  <table class="parent-table">
    <tr 
      v-for="(item, idx) in tableData" 
      :key="idx" 
      class="table-row"
      :class="{ 'highlight-row': idx + 1 === selectedIndex }"
    >
      <!-- 表格内容 -->
    </tr>
  </table>
</template>

<script>
export default {
  props: {
    selectedIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tableData: [] // 你的表格数据
    }
  }
}
</script>

<style scoped>
.table-row.highlight-row {
  background: red;
}
</style>

注意：nth-child选择器从1开始计数，所以判断时用idx + 1和选中索引对比。

方法2：使用CSS变量（父组件直接控制样式）

如果不想修改表格组件代码，可通过CSS变量动态传递值，结合选择器实现高亮：

<template>
  <div 
    class="table-container"
    :style="{ '--selected-row': selected.index }"
  >
    <TableComponent />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: {
        index: 2
      }
    }
  }
}
</script>

<style scoped>
.table-container >>> .parent-table .table-row:nth-child(var(--selected-row)) {
  background: red;
}
</style>

这种方式依赖现代浏览器对CSS变量的支持，兼容性较好。