el-select的自定义插槽嵌套eltable

`el-select` 是 Element UI 提供的一个下拉选择组件，而 `el-table` 是一个用于展示表格数据的组件。要实现 `el-select` 中自定义插槽（Slot）嵌套 `el-table`，主要是为了动态地根据选中的值在下拉选项中显示相关的表格数据。以下是一个基本的示例： ```html <template> <el-select v-model="selectedValue" placeholder="请选择"> <template #default> <!-- 下拉选项 --> <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" @click="showTable(item)" ></el-option> </template> <template #empty> <span>无匹配数据</span> </template> </el-select> <!-- 使用 slot: table 插槽来展示表格内容 --> <template v-if="tableData"> <el-table :data="tableData"> <el-table-column prop="prop1" label="列1"></el-table-column> <!-- 添加更多列... --> <template slot="table"> <!-- 这里使用 slot-content 或者 slot="default" 替换 --> <slot name="table">表内容将在这里根据 selectedValue 的值动态渲染</slot> </template> </el-table> </template> </template> <script> export default { data() { return { selectedValue: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, // 更多选项... ], tableData: null, }; }, methods: { showTable(item) { this.tableData = item.data; // 假设 item 数据包含表格数据 }, }, }; </script> ``` 在这个例子中，当用户选择 `el-select` 中的某个选项时，`showTable` 方法会被调用，更新 `tableData`。然后在 `el-table` 的 `table` 插槽中，你可以根据 `selectedValue` 的值动态渲染表格内容。 相关问题： 1. 在这个例子中，`template #default` 和 `template #empty` 分别代表什么？ 2. 如何确保表格数据的结构与选项中的数据结构匹配？ 3. 如何处理 `selectedValue` 变化时，`tableData` 更新但表格不刷新的情况？