el-input如何获取el-table-column中的值

### 解决方案 在 Vue.js 和 Element-UI 中，可以通过 `slot-scope` 获取表格列的数据并将其绑定到输入框 (`el-input`) 中。以下是实现方法： #### 实现方式 通过自定义模板（`<template>`），可以访问当前行数据并通过事件触发将指定列的值传递给 `el-input`。 ```html <el-table :data="tableData" border style="width: 100%"> <!-- 定义一列表格 --> <el-table-column prop="name" label="名称" width="180"> <template slot-scope="scope"> <span>{{ scope.row.name }}</span> </template> </el-table-column> <!-- 可编辑列 --> <el-table-column prop="age" label="年龄" width="180"> <template slot-scope="scope"> <!-- 将 age 值绑定到 el-input 并支持双向绑定 --> <el-input v-model="scope.row.age"></el-input> </template> </el-table-column> <!-- 操作按钮 --> <el-table-column label="操作" width="120"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> </template> </el-table-column> </el-table> ``` 在此代码中，`scope.row` 表示当前行的对象，而 `scope.row.propName` 则表示该行对应属性的值[^1]。通过将 `el-input` 绑定到 `scope.row.propName` 上，可以直接修改表格中的数据，并实时反映更改。 #### 数据模型 为了使表单能够动态更新，需确保 `tableData` 是响应式的对象数组。例如： ```javascript export default { data() { return { tableData: [ { name: '张三', age: 25 }, { name: '李四', age: 30 } ] }; }, methods: { handleEdit(index, row) { console.log('编辑第' + index + '行:', row); } } }; ``` 当用户在 `el-input` 输入新值时，由于绑定了 `v-model`，会自动同步至对应的 `row` 属性中[^1]。 --- ### 注意事项 如果需要手动控制某些逻辑（如验证或格式化），可以在 `@input` 或 `@change` 事件中处理额外的操作。例如： ```html <el-input v-model="scope.row.age" @input="validateInput($event)" ></el-input> ``` 其中，`validateInput` 方法可用于校验输入的有效性。 --- ### 使用场景扩展 对于更复杂的场景，比如需要显示隐藏特定列或者动态调整列宽，可参考以下技巧： - 动态设置 `v-if` 控制列显隐。 - 自定义单元格内容以满足复杂需求[^2]。 - 使用 `formatter` 函数对原始数据进行转换后再渲染[^3]。 ---