vue3 element表格中有一行数据:姓名年龄编码。当姓名发生改变时获取当前行的值
可以使用 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 获取姓名的新值。
原文地址: https://www.cveoy.top/t/topic/ZdN 著作权归作者所有。请勿转载和采集!