element-ui table 动态编辑 获取输入的值

要实现element-ui table的动态编辑并获取输入的值，需要以下几个步骤：

1. 在表格的列配置中，将需要编辑的列设置为可编辑状态（设置:editabl="true"）。

2. 在表格中绑定edit和cellClick事件，用于触发编辑和点击单元格的操作。

3. 在methods中定义edit和cellClick方法，用于处理编辑和单元格点击的逻辑。

4. 在edit方法中，使用当前编辑行的索引和列的字段名称，获取对应的输入值。

5. 在cellClick方法中，通过event参数获取当前点击的单元格信息，可以通过event.row和event.column实现对当前单元格的操作。

下面是一个简单的示例代码：

<template>
<div>
<el-table :data="tableData" ref="editableTable" @edit="edit" @cellClick="cellClick">
<el-table-column prop="name" label="姓名" :editable="true"></el-table-column>
<el-table-column prop="age" label="年龄" :editable="true"></el-table-column>
</el-table>
</div>
</template>

<script>
export default {
data() {
return {
tableData: [
{ name: '小明', age: 20 },
{ name: '小红', age: 18 },
],
};
},
methods: {
edit(index, row) {
const fieldName = Object.keys(row)[index]; // 获取字段名称
const value = row[fieldName]; // 获取输入的值
console.log(value); // 打印输入的值
},
cellClick(event) {
const fieldValue = event.row[event.column.property]; // 获取当前单元格的值
console.log(fieldValue); // 打印当前单元格的值
},
},
};
</script>

需要注意的是，以上示例代码仅演示了获取输入的值的基本方法，具体根据实际情况进行修改和扩展。