监听el-table中 自定义封装的某个组件的值发现改变调用函数

监听el-table中 自定义封装的某个组件的值发现改变调用函数

当你在一个 el-table 中使用封装的自定义组件作为单元格内容时，监听这个组件的值变化并调用函数，可以通过以下步骤实现：

1. 创建自定义组件：首先创建一个自定义的 Vue 组件，这个组件将会嵌入到 el-table 的单元格中。
2. 在自定义组件中暴露事件：自定义组件应当暴露一个事件，用于通知父组件（通常是 el-table 的模板所在组件）组件内的值发生了变化。
3. 监听事件并在父组件中处理：在父组件中监听这个事件，并在事件触发时执行相应的函数。

示例代码

创建自定义组件 CustomCell.vue

<template><div><el-input v-model="value" @input="notifyParentOfChange"></el-input></div>
</template><script>
export default {props: {value: {type: String,required: true}},methods: {notifyParentOfChange(event) {// 通知父组件值已经改变this.$emit('input-change', event.target.value);}}
}
</script>

在父组件中使用自定义组件 TableComponent.vue

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="name" label="姓名"></el-table-column><el-table-column label="年龄"><template slot-scope="{ row }"><!-- 使用自定义组件 --><custom-cell :value="row.age" @input-change="onAgeChanged"></custom-cell></template></el-table-column></el-table>
</template><script>
import CustomCell from './CustomCell.vue';export default {components: {CustomCell},data() {return {tableData: [{ name: 'Tom', age: '25' },{ name: 'Jerry', age: '22' }]};},methods: {onAgeChanged(newAge, row) {console.log(`年龄改变为：${newAge}，行数据：`, row);// 更新父组件中的数据row.age = newAge;// 在这里可以调用你需要的功能函数// 例如保存到服务器或其他逻辑处理}}
};
</script>

解释

在这个例子中，我们创建了一个名为 CustomCell 的自定义组件，用于在 el-table 的单元格中显示和编辑数据。这个组件通过 v-model 与父组件的数据进行双向绑定，并且在 el-input 的 @input 事件中通过 $emit 发送一个名为 input-change 的自定义事件，传递新的值给父组件。

在父组件中，我们监听 CustomCell 组件发出的 input-change 事件，并在事件处理函数 onAgeChanged 中接收新的值，并更新父组件中的数据。

这种方法允许你在 el-table 中灵活地使用自定义组件，并能够有效地监听和处理这些组件内的数据变化。