监听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 中灵活地使用自定义组件，并能够有效地监听和处理这些组件内的数据变化。