vue 监听子页面修改收件人姓名，点击保存，父页面的el-table即可展示出修改后的收件人姓名，请写出相关代码

在父页面中，需要在 el-table 中绑定一个 data 属性，存储子页面修改后的收件人姓名列表数据。具体代码如下：

<template>
  <el-table :data="tableData" border>
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="收件人姓名"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 存储子页面修改后的收件人姓名列表数据
    };
  },
  // 监听子页面传递的数据
  mounted() {
    window.addEventListener('message', (e) => {
      if (e.data.type === 'updateName') {
        // 更新相应的数据
        this.tableData[e.data.index].name = e.data.name;
      }
    });
  },
};
</script>

在子页面中，需要进行收件人姓名的修改，并且将修改后的数据传递给父页面。具体代码如下：

<template>
  <div>
    <el-input v-model="name" placeholder="请输入收件人姓名"></el-input>
    <el-button type="primary" @click="save">保存</el-button>
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      newName: this.name,
    };
  },
  methods: {
    // 点击保存按钮，将修改后的数据传递给父页面
    save() {
      // 发送数据到父页面
      window.parent.postMessage(
        {
          type: 'updateName',
          index: this.index,
          name: this.newName,
        },
        '*'
      );
    },
  },
};
</script>

需要注意的是，在子页面中，我们使用了 window.parent.postMessage 方法将更新后的数据传递给父页面，其中：

- 第一个参数是一个对象，type 属性表示操作类型，index 属性表示要修改的数据在父页面中的索引，name 属性表示修改后的收件人姓名；
- 第二个参数是目标窗口的 origin（源），这里使用通配符 * 表示任何来源的窗口都可以接收到消息。