Vue.js中点击iView Table单元格如何获取数据并修改样式？

我刚好之前做过类似的需求，给你分享下具体的实现思路和代码示例，亲测可行！

一、获取点击单元格的数据与列标题 #

iView的Table组件自带@cell-click事件，点击单元格时会直接返回当前行数据、当前列配置等关键参数，通过这些参数就能轻松拿到我们需要的信息：

核心事件参数说明 #

@cell-click的回调函数会接收4个实用参数：

• row: 当前点击行的完整数据对象
• column: 当前点击列的配置对象（包含标题title、字段key等核心信息）
• cell: 点击的单元格DOM元素（可选，一般用不到）
• event: 原生点击事件（可选）

模板代码示例 #

<template>
  <Table
    :columns="columns"
    :data="tableData"
    @cell-click="handleCellClick"
    :cell-class-name="getCellClassName"
  />
</template>

处理点击事件（脚本部分） #

export default {
  data() {
    return {
      // 表格列配置
      columns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' },
        { title: '职业', key: 'job' }
      ],
      // 表格数据（注意给每行加唯一标识，比如id，方便后续定位）
      tableData: [
        { name: '张三', age: 28, job: '前端开发', id: 1 },
        { name: '李四', age: 32, job: '后端开发', id: 2 }
      ],
      // 存储当前选中的单元格信息（用行唯一ID+列key定位）
      selectedCell: { rowId: null, columnKey: null }
    }
  },
  methods: {
    handleCellClick(row, column) {
      // 1. 获取单元格数据：通过列的key从行数据中取值
      const cellValue = row[column.key]
      // 2. 获取列标题
      const columnTitle = column.title
      
      // 控制台打印验证，实际项目里可以替换成业务逻辑
      console.log(`点击的列：${columnTitle}，单元格内容：${cellValue}`)
      
      // 保存选中单元格的标识，用于后续样式切换
      this.selectedCell = {
        rowId: row.id,
        columnKey: column.key
      }
    },
    // 自定义单元格类名，用于动态修改样式
    getCellClassName({ row, column }) {
      // 判断当前单元格是否是选中项
      if (row.id === this.selectedCell.rowId && column.key === this.selectedCell.columnKey) {
        // 根据列标题/列key返回对应样式类
        if (column.title === '姓名') return 'cell-red'
        if (column.title === '年龄') return 'cell-green'
        // 其他列默认样式
        return 'cell-active'
      }
      return ''
    }
  }
}

二、修改单元格CSS样式 #

上面的代码已经通过cell-class-name完成了样式绑定，只需要在<style>里定义对应的类即可：

<style scoped>
/* 姓名列选中样式 */
.cell-red {
  background-color: #ffeeee !important;
  color: #dc143c !important;
}
/* 年龄列选中样式 */
.cell-green {
  background-color: #eeffee !important;
  color: #228b22 !important;
}
/* 默认选中样式 */
.cell-active {
  background-color: #f5f5f5 !important;
}
</style>

扩展：支持多单元格选中 #

如果需要同时选中多个单元格并保留样式，可以把selectedCell改成数组，实现点击切换选中状态：

data() {
  return {
    // 存储多个选中单元格：[{rowId: 1, columnKey: 'name'}, ...]
    selectedCells: []
  }
},
methods: {
  handleCellClick(row, column) {
    const targetCell = { rowId: row.id, columnKey: column.key }
    // 判断是否已选中，切换状态
    const existIndex = this.selectedCells.findIndex(item => 
      item.rowId === row.id && item.columnKey === column.key
    )
    if (existIndex > -1) {
      this.selectedCells.splice(existIndex, 1)
    } else {
      this.selectedCells.push(targetCell)
    }
  },
  getCellClassName({ row, column }) {
    const isSelected = this.selectedCells.some(item => 
      item.rowId === row.id && item.columnKey === column.key
    )
    if (isSelected) {
      if (column.key === 'name') return 'cell-red'
      if (column.key === 'age') return 'cell-green'
      return 'cell-active'
    }
    return ''
  }
}

这样点击单元格就能自由切换选中状态，不同列还能显示不同颜色样式~

内容的提问来源于stack exchange，提问作者Luis Souza