VUE3和antd组件库实现动态展示tab页,并且每个tab页签下动态生成form表单。_vue3 a-tabs

69 阅读2分钟


const stateK = reactive({ editNameModel: [] }) //声明表单ref动态生成具体数量不知道,所以是数组 const editNameRef = ref([]) //getFormRef 在 Vue 中,使用 ref 创建的引用变量是响应式的。在组件渲染期间,如果你修改了 editNameRef,那么 Vue 会在下一个渲染周期中重新渲染组件并更新相关的 DOM。 //但是,editNameRef 在模板中使用的时候,可能是在组件渲染之前被访问到,导致它是空的。这是因为在模板中的代码(如 @click="submitForm")可能在组件初始化之前就被解析。 //为了解决这个问题,你可以使用 ref 创建一个响应式的数组,然后在 setup 钩子中根据表单的数量动态地填充这个数组。 //这里困扰我一下午!!!!! const getFormRef = index => { editNameRef.value[index] = editNameRef.value[index] || ref(null) return editNameRef.value[index] } //获取动态数据 function handleGetName() { post('xxx').then(data => { if (data.code === 200) { stateK.editNameVisible = true stateK.editNameModel = data.data stateK.activeTab = stateK.editNameModel[0].id } else { message.error(data.message || '获取项目简称失败') } }) } //保存校验 function handleChangeName() { let formData = [] Promise.all(editNameRef.value.map(formRef => formRef.value[0].validate())) .then(() => { stateK.editNameModel.forEach(tab => { tab.data.forEach(item => { formData.push({ mappingId: item.mappingId, projectId: item.projectId, projectName: item.projectName, projectSeqNo: item.projectSeqNo, projectShortName: item.projectShortName, templateId: item.templateId }) }) }) put('xxxx', formData).then(data => { if (data.code === 200) { message.success('操作成功') stateK.editNameVisible = false getTableList() } else { message.error(data.message || '修改项目简称失败') } }) }) .catch(e => { let errMsg = findObjectIndex(stateK.editNameModel, e.values[0]) if (errMsg) { message.info(请检查-${errMsg.name}-模板下的第-${errMsg.index + 1}-条数据) } else { message.info('请检查数据是否填写完整')

专业技能

一般来说,面试官会根据你的简历内容去提问,但是技术基础还有需要自己去准备分类,形成自己的知识体系的。简单列一下我自己遇到的一些题

  • HTML+CSS

  • JavaScript

  • 前端框架

  • 前端性能优化

  • 前端监控

  • 模块化+项目构建

  • 代码管理

  • 信息安全

  • 网络协议

  • 浏览器

  • 算法与数据结构

  • 团队管理

最近得空把之前遇到的面试题做了一个整理,包括我本人自己去面试遇到的,还有其他人员去面试遇到的,还有网上刷到的,我都统一的整理了一下,希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限,仅展示部分内容

开源分享:docs.qq.com/doc/DSmRnRG…