定期分享我的发现和想法，感谢你的陪伴和支持

主要功能是将一个名为 `processedData` 的对象中的数据转换为一个新的数组 `dataList`。转换的依据是一个映射表 [`fieldToDataType`]，该映射表定义了 `processedData` 对象的属性名（key）与一个称为 `dataType` 的数字之间的对应关系。

背景：vue2 + element ui子组件里面写Dialog 对话框，父组件直接调用如果在子组件关闭了Dialog 对话框，那么：①在子组件可见状态是false②在父组件可见状态是true会导致按无法跳出弹窗所以需要：①Dialog 对话框父组件、子组件双向绑定可见状态，才能控制可见状态的false②Vue组件中的一个[`watch`]属性，用于监视`visible`属性的变化

这行代码的作用是切换折叠项的展开和收起状态。如果当前折叠项已经展开，则收起它；如果当前折叠项未展开，则展开它。通过这种方式，可以实现折叠面板的交互效果。

Element UI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件和布局工具，帮助开发者快速构建美观、响应式的前端页面。在使用 Element UI 进行页面布局时，有一些常见的注意事项，可以帮助你避免常见的问题，并提升开发效率和用户体验。本文将介绍这些注意事项，帮助你在使用 Element UI 时更加得心应手。注意，el-container不能嵌套使用

在本系列的第二篇文章中，我们将梳理如何在Vue.js中使用Element-UI实现表格与表单的结合：如何在父组件中引用子组件，子组件中通过按钮触发弹窗表单。这种设计模式在实际项目中非常常见，特别是在需要对数据进行增删改查操作时，能够有效地提升用户体验和代码可维护性。本文将分为以下几个部分：1、环境配置与基础介绍2、父子组件的结构与数据传递3、使用Element-UI实现弹窗与表单4、完整示例代码与详细解析（后面一篇博客）准备好了吗？让我们开始吧！

在现代Web开发中，表格和表单是用户交互中最常见的元素。无论是数据展示、编辑，还是信息提交，都离不开表格与表单的有效结合。Vue.js作为一个渐进式的JavaScript框架，配合Element-UI这样强大的组件库，可以大大简化开发流程，提高开发效率。在本系列的第一篇文章中，我们将梳理如何在Vue.js中使用Element-UI实现表格与表单的结合：如何在父组件中通过按钮触发弹窗，并在弹窗中调用子组件的表单。这种设计模式在实际项目中非常常见，特别是在需要对数据进行增删改查操作时，能够有效地提升用户体

在本系列的第一篇文章中，我们将梳理如何在Vue.js中使用Element-UI实现表格与表单的结合：如何在父组件中通过按钮触发弹窗，并在弹窗中调用子组件的表单。这种设计模式在实际项目中非常常见，特别是在需要对数据进行增删改查操作时，能够有效地提升用户体验和代码可维护性。本文将分为以下几个部分：1、环境配置与基础介绍2、父子组件的结构与数据传递3、使用Element-UI实现弹窗与表单4、完整示例代码与详细解析（后面一篇博客）

用户注册与登录：在用户注册时，表单需要处于编辑模式，允许用户输入信息。而在用户查看个人资料时，可以使用只读模式。信息审核：在信息审核页面，审核人员通常只需要查看信息而无需修改，这时可以使用只读模式。数据展示：在数据展示页面，如报告或统计信息页面，使用只读模式可以防止误操作。

为了进行前端页面的优化，需要修改代码。然而，由于缺乏接口文档，无法准确了解原来绑定的数据的结构，即它是一个数组还是一个字符串。为了解决这个问题，老师教我：可以使用Chrome浏览器的Network面板来查看前后台数据传输请求，以便获取接口返回的数据结构。通过查看请求详情和返回的数据，我们可以大致了解数据的结构，从而进行代码的修改和优化。

封面图内含彩蛋 ~原因：Vue2要求模板中的``中只能有一个根元素，也就是说最外层不能同时包含其他元素或者文本。如果模板中出现多个根元素，就会触发这个错误。解决：vue2：所以，删除多的根元素，or在最外层再加一个div包裹其他根元素vue3中，则去掉了这个限制。引入了一个新的特性叫做 Fragment，这允许我们在不需要额外的 DOM 元素的情况下使用多个根元素。

通过本文的示例，我们可以看到如何在父组件中调用公共子组件，并实现从后端获取数据、转换数据格式，以及增加和删除行的功能。这种方法提高了代码的可复用性和可维护性，使我们的前端代码更加简洁和高效。

使用 vue ui 图形化界面创建 vue 项目是一种方便的方式，可以直观地操作和查看项目的配置和依赖。

SourceTree是一款免费的Git和Mercurial版本控制系统的可视化工具。它提供了一个直观的用户界面，使得使用Git和Mercurial更加容易和方便。SourceTree允许用户进行版本控制的操作，如创建和克隆仓库，提交和管理代码变更，查看和比较历史记录等。它也支持与远程仓库进行交互，如推送和拉取代码，解决冲突等。SourceTree也提供了一些高级功能，如分支管理，标签管理，文件比较和合并等。SourceTree是一个强大的版本控制工具，可以帮助开发人员更好地管理和控制代码的版本。

卸载重装了两三次，重启真好用hh尽量卸载干净哦！注意需要卸载nodejs，后面可以选择nvm控制已安装的所有版本，但是会出现node切换后无效的情况。