vue3.0 el-table 行内点击图标 修改该条数据某个值

在Vue 3和Element Plus中，您可以使用el-table的cell-click事件来处理行内点击图标的情况。以下是一个简单的示例，展示了如何在点击表格某一列的图标时修改该行数据的某个值：

<template>
  <el-table :data="tableData" @cell-click="handleCellClick">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column label="Operations">
      <template #default="{ row, column }">
        <el-icon @click.stop="editRow(row, column)">
          <edit />
        </el-icon>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { Edit } from '@element-plus/icons-vue';
 
const tableData = ref([
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
  // ... more data
]);
 
const handleCellClick = (row, column, cell, event) => {
  if (column.property === 'name') {
    // 点击名字列时的处理逻辑
  }
};
 
const editRow = (row, column) => {
  if (column.property === 'Operations') {
    // 假设我们要修改age
    row.age += 1; // 或者执行更复杂的逻辑
  }
};
</script>

在这个例子中，我们定义了一个editRow函数，它会在点击图标时被调用。我们检查点击的列，如果是操作列，我们就更新该行数据的age值。注意，我们使用@click.stop来阻止事件冒泡，因为在el-table内部的点击事件可能会被识别为行点击，从而触发多次调用。