vue3 获取el-dialog里面的dom结构 + 递归式深拷贝

vue3 获取el-dialog里面的dom结构 + 深拷贝

因为在vue3里方法都是在setup里面，dialog刚加载过来时是不存在的所以获取不到里面的dom结构

而setup里面不存在this，所以可以在页面执行方法的时候传入this，从而获取到dom：示例……

下列代码是获取dialog里面的form表单进行表单重置：

dom结构：

<el-dialog
      title="添加信息项"
      v-model="dialogVisible"
      width="800px"
    >
      <el-form
        :model="info"
        label-width="180px"
        style="width: 400px; margin-left:50px;"
        ref="addData"
        :rules="rules"
      >
        <el-form-item label="信息项名称" prop="name">
          <el-input v-model="info.name"></el-input>
        </el-form-item>
        <el-form-item label="信息项类型" prop="type">
          <el-select v-model="info.type" placeholder="请选择" class="tw-w-full">
            <el-option
              v-for="item in dataType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="信息项信息敏感级别" prop="rank">
          <el-select v-model="info.rank" placeholder="请选择" class="tw-w-full">
            <el-option
              v-for="item in secrecy"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="共享类型" prop="shareType">
          <el-select v-model="info.shareType" placeholder="请选择" class="tw-w-full">
            <el-option
              v-for="item in shareType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源系统名称" prop="systemName">
          <el-input v-model="info.systemName"></el-input>
        </el-form-item>
      </el-form>
      <div name="footer">
        <el-row :gutter="10">
          <el-col
            :span="6"
            :push="18"
          >
            <el-button
              type="primary"
              @click="addInfo(this)"
            >确 定</el-button>
            <el-button @click="reset(this)">取 消</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

js:

//重置
const reset = (node) => {
 nextTick(()=>{
  node.addData.resetFields()
 })
  dialogVisible.value = false
}
//添加
const addInfo = (node) => {
     table.value.push(deepClone(info.value)) //这里涉及到浅拷贝和深拷贝，浅拷贝清空的时候添加的信息也会被清除，所以我们这里做一下深拷贝
     reset(node)//添加完成调一下清除表单验证，否则再次添加表单会有提示
 }
}


//深拷贝
/**
 * @param {Object} source
 * @returns {Object}
 */
export function deepClone (source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
}