element-plus el-table updateKeyChildren事件怎么使用

Element Plus 的 `el-table` 组件提供了一个 `update-keychildren` 或者 `@update-keychildren` 事件，这个事件是在动态更新表格行的子级数据时触发的。当你需要对表格的某一行的子节点数据进行增删改操作，并希望表格视图能实时反映出这种变化时，可以利用这个事件。

例如，假设你有一个表格，每个表格行有多个子项，你可以这样使用：

<template>
  <el-table :data="tableData" @update-keychildren="handleUpdateKeyChildren">
    <!-- 表格列定义 -->
    <el-table-column prop="parentColumn" label="父列" key="parentKey"></el-table-column>
    <el-table-column prop="children" label="子项" v-for="(child, index) in columnChildren" :key="index" :render="renderChildItem"></el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    handleUpdateKeyChildren(row, oldChildren, newChildren) {
      // 在这里处理新旧子项数组的变化，比如添加、删除或修改子项
      console.log('子项数据更新:', row, oldChildren, newChildren);
    },
    renderChildItem(h, {row}) {
      return h('div', {}, [
        // 渲染每个子项的内容
      ]);
    },
  },
  data() {
    return {
      tableData: [{ parentColumn: '父数据1', children: [] }],
      columnChildren: ['子项1', '子项2'], // 示例中的静态子项数据，实际应用中会动态获取
    };
  }
};
</script>

在这个例子中，每当子节点数据发生变化时，`handleUpdateKeyChildren` 方法会被调用，你可以在这里更新数据模型，然后Vue将自动更新视图。