1.实现效果

2.Modal弹窗的渲染过程

一、Vue组件的生命周期

Vue组件从创建到销毁会经历一系列的生命周期钩子，这些钩子为开发者提供了在不同阶段插入自定义逻辑的机会。在Modal弹窗的上下文中，这些生命周期钩子同样适用。

1. beforeCreate：组件实例初始化之后，数据观测和事件配置之前被调用。此时Modal弹窗的模板和数据都还未被处理。

2. created：组件实例创建完成后被调用。此时数据已经初始化，但还没有开始DOM编译和挂载。对于Modal弹窗来说，这意味着其数据已经就绪，但弹窗本身还未渲染到页面上。

3. beforeMount：组件挂载之前被调用，此时组件的模板已经编译完成，但尚未挂载到页面上。对于Modal弹窗，这意味着其HTML结构已经准备好，但还未显示。

4. mounted：组件挂载完成后被调用，此时组件已经完全被渲染到页面中。对于Modal弹窗，这表示弹窗已经显示在用户面前。

二、Modal弹窗的渲染过程

1. 初始化：当Vue实例被创建时，Modal弹窗（作为Vue组件）也会相应地被初始化。这包括数据的初始化、模板的编译等。

2. 挂载：在mounted生命周期钩子被调用时，Modal弹窗的虚拟DOM会被渲染成真实的DOM，并挂载到页面的指定位置（通常是某个容器元素内）。

3. 显示与隐藏：Modal弹窗的显示与隐藏通常通过改变其CSS样式（如display属性）或Vue的v-if、v-show指令来实现。这些操作可以在Vue的方法中定义，并通过事件或计算属性来触发。

三、与页面渲染的顺序关系

1. 页面渲染：Vue页面渲染通常遵循Vue组件的生命周期顺序，从根组件开始，逐级向下渲染子组件。

2. Modal弹窗的渲染时机：Modal弹窗作为页面上的一个组件，其渲染时机取决于它在页面组件树中的位置以及相关的逻辑控制。如果Modal弹窗是页面组件的一个子组件，那么它将在页面组件挂载之后（即页面渲染的一部分）进行渲染。

3. 动态渲染：如果Modal弹窗的显示是基于某些条件或用户交互的（如点击按钮后显示），那么它的渲染将发生在这些条件满足或用户交互发生时。此时，Vue会重新渲染相关的组件部分，包括Modal弹窗。

3.具体实现 

3.1 父组件

v-if判断 销毁与创建弹窗的dom,避免子组件弹窗在页面挂载后弹窗也进行渲染

<ReportDetail ref="Detail" v-if="detailVisible" :visible="detailVisible" @Detail="Detail" ></ReportDetail>

使用异步执行延迟回调 

 Detailr(row) {
        this.detailVisible = true
        this.$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);
  },