el-dialog弹窗，显示详情的两种方法

1. 直接从外层通过props调用列表数据（弊端：如果外层没有数据活着详情数据单独通过接口查，就无法获取）

   1. 父组件首先需要一个名为revoke的事件，通过点击传入当前行的数据

   2.   <el-button  link type="primary" @click="revoke(scope.row)">
                      查看
        </el-button>

      父组件中引入子组件

   3.       <子组件路径
              :id="vokeId" v-model:model-value="showEdit" :data="modalForm" @reload="getList" 
            />

      父组件下方定义        

      /** 是否显示编辑弹窗 */
      let showEdit = $ref(false)
      
      /** 当前编辑数据 */
      let modalForm = $ref<any | null>(null)
      
      function revoke(row: any) {
          modalForm = row ?? null
          showEdit = true
        /* 子组件接收的ID */
        vokeId.value = row.id
      }

                子组件通过props接收 （id就是父组件传过来的）

const props = defineProps<{
  data: any
  // 弹窗是否打开
  modelValue: boolean
  id: number
}>()

就可以在template中直接使用

          <el-col :span="12">
            <el-form-item label="显示的字段名：">
                <!-- data就是列表传进来的数据直接直接通过.的方式获取 -->
              {{ data.content }}
            </el-form-item>
          </el-col>

2：不需要通过外层数据获取，直接在子组件中调用详情接口就可将数据全部查出

1. 定义一个getList的方法，res为调用get详情接口的方法，res会获取到一个对象，通过定义的form和获取到的res进行合并，现在form就有了 res的数据       

   async function getList(id: number) {
     loading = true
     const res = await getxxxById(id)
   
     Object.assign(form, res)
     loading = false
   }

   2:上方再通过form进行取值

               <el-form-item label="显示的字段名：">
                   <!-- 显示的字段 -->
                 {{ form.content }}
               </el-form-item>

   3:这个地方需要通过watch监听一下，监听有子组件传来的id再刷新这个调用详情的方法

           

   watch(() => props.id, () => {
     getList(props.id)
   })