1.实现效果
2.Modal弹窗的渲染过程
一、Vue组件的生命周期
Vue组件从创建到销毁会经历一系列的生命周期钩子，这些钩子为开发者提供了在不同阶段插入自定义逻辑的机会。在Modal弹窗的上下文中，这些生命周期钩子同样适用。
-
beforeCreate：组件实例初始化之后，数据观测和事件配置之前被调用。此时Modal弹窗的模板和数据都还未被处理。
-
created：组件实例创建完成后被调用。此时数据已经初始化，但还没有开始DOM编译和挂载。对于Modal弹窗来说，这意味着其数据已经就绪，但弹窗本身还未渲染到页面上。
-
beforeMount：组件挂载之前被调用，此时组件的模板已经编译完成，但尚未挂载到页面上。对于Modal弹窗，这意味着其HTML结构已经准备好，但还未显示。
-
mounted：组件挂载完成后被调用，此时组件已经完全被渲染到页面中。对于Modal弹窗，这表示弹窗已经显示在用户面前。
二、Modal弹窗的渲染过程
-
初始化：当Vue实例被创建时，Modal弹窗（作为Vue组件）也会相应地被初始化。这包括数据的初始化、模板的编译等。
-
挂载：在
mounted生命周期钩子被调用时，Modal弹窗的虚拟DOM会被渲染成真实的DOM，并挂载到页面的指定位置（通常是某个容器元素内）。 -
显示与隐藏：Modal弹窗的显示与隐藏通常通过改变其CSS样式（如
display属性）或Vue的v-if、v-show指令来实现。这些操作可以在Vue的方法中定义，并通过事件或计算属性来触发。
三、与页面渲染的顺序关系
-
页面渲染：Vue页面渲染通常遵循Vue组件的生命周期顺序，从根组件开始，逐级向下渲染子组件。
-
Modal弹窗的渲染时机：Modal弹窗作为页面上的一个组件，其渲染时机取决于它在页面组件树中的位置以及相关的逻辑控制。如果Modal弹窗是页面组件的一个子组件，那么它将在页面组件挂载之后（即页面渲染的一部分）进行渲染。
-
动态渲染：如果Modal弹窗的显示是基于某些条件或用户交互的（如点击按钮后显示），那么它的渲染将发生在这些条件满足或用户交互发生时。此时，Vue会重新渲染相关的组件部分，包括Modal弹窗。
3.具体实现
3.1 父组件
v-if判断 销毁与创建弹窗的dom,避免子组件弹窗在页面挂载后弹窗也进行渲染
<ReportDetail ref="Detail" v-if="detailVisible" :visible="detailVisible" @Detail="Detail" ></ReportDetail>使用异步执行延迟回调
Detailr(row) {this.detailVisible = truethis.$nextTick(() => {this.$refs.Detail.openDetail(row,.........)});},3.2 子组件
表格内设置使用 通过判断是否第一行 default 默认展示 ref进行标记vxe-input输入框
表格其余行启用 edit 编辑 表头编辑模式开启属性
:edit-config="{trigger: 'click', mode: 'cell'}"<vxe-column field="detail" title="说明" min-width="100"><template #default="{ row ,rowIndex }"><span v-if="rowIndex!=0"> {{row.detail}}</span>
<vxe-input ref="inputRef" v-if="rowIndex==0" v-model="row.detail" type="text"></vxe-input></template><template #edit="{ row }"><vxe-input v-model="row.detail" type="text"></vxe-input></template>
</vxe-column>挂载到mounted中 设置0.5秒延时 ，等待vxe-table内表格渲染完成再利用input焦点聚集激活focus（）
mounted() {setTimeout(() => { this.$refs.inputRef.focus();}, 500);},
