可以使用 Vue3 的 v-model 指令来绑定每个单元格的值,然后在绑定的数据对象中添加一个监听器,当姓名发生改变时触发监听器,并获取当前行的值。

例如,可以在表格中的每一行中添加一个 input 元素来绑定每个单元格的值:

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名">
      <template #default="{ row }">
        <input v-model="row.name" @change="handleNameChange(row)">
      </template>
    </el-table-column>
    <el-table-column label="年龄">
      <template #default="{ row }">
        <input v-model="row.age">
      </template>
    </el-table-column>
    <el-table-column label="编码">
      <template #default="{ row }">
        <input v-model="row.code">
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, code: '001' },
        { name: '李四', age: 25, code: '002' },
        { name: '王五', age: 30, code: '003' },
      ],
    };
  },
  methods: {
    handleNameChange(row) {
      console.log(row); // 当前行的值
    },
  },
};
</script>

在 handleNameChange 方法中,可以获取当前行的值 row,这个值就是包含当前行所有单元格数据的一个对象。可以通过 row.name 获取姓名的新值。

vue3 element表格中有一行数据:姓名年龄编码。当姓名发生改变时获取当前行的值

原文地址: https://www.cveoy.top/t/topic/ZdN 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录