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 }