20240124收获

1.el-upload，上传组件，必须加一个属性叫做action,用来指定上传的地址，但是因为我们的上传不单单是上传文件，我们需要拿到服务器反馈的数据，所以我们必须自定义上传事件，所以不用这个默认的上传事件，但是又不能不写，于是我们将action写成 action="#"即可。

这里注意，#就是普通字符串，不用加冒号给action。

2.通过http-request来定义我们的上传和接收。这里注意http-request这个属性调用我们的函数，返回给我们的参数是一个完整的数据，我们要获取其中的file数据，需要形参.file这样在我们的函数里面写。或者直接把形参改写成function 函数名({file}){}这样的形式

3.这个上传组件内部还要添加上btn和文字提示，才算一个完整的控件，有点儿类似form，需要form-item和一些控件才是一个完整的表单。

4.做表单校验的时候，需要配置rules规则，这里要理解一下，各个需要配置的规则实质上都是:model的表单下的prop的el-form-item，也就是model和prop才是用来直接关联规则配置的，所以如果是添加功能的页面，prop和model是我们自己定义的，因为不像渲染页，这个功能里面我们是拿不到数据的，所以就不能像渲染页那样用简单的数据结构，{}或者[]来设置model，我们得自己命名，或者直接使用v-model绑定的数据的那个对象，比如v-model="xx.name"，我们也可以直接用xx来作为:model来绑定的值。

5.有时候请求传过去的参数没有作用，可能是因为在封装api的时候把参数写错了，比如pramas，我就错写成了primas，然后在request里面用了简写，

如果这里都写成primas，那么就相当于不带参数进行post请求，所以不论我怎么修改参数，请求都会无视参数。

6.因为el-upload不属于常规的el-form的控件，所以饿了么团队对于这个东西的校验没有按他们的要求来写，这些校验逻辑需要我们自己来设置。

首先this.$refs.表单.validate这个方法校验完上传组件后，如果条件不满足，会有文字提示，这个提示的功能源于el-form-item，所以表单控件是一定要记得丢在el-form-item里面的。当我们重新成功提交文件后，这个提示文字并不会消失，所以需要我们自己手动调一下form的校验，然后就是如果我们提交文件后再叉掉文件，校验不会自动，所以这里还需要我们自己调一下form的校验。所以我们要关注的就是两个，一个是如何手动调form校验某些控件，另一个就是我们应该什么时候调。

所以结论就是使用this.$refs.表单.validateField这个方法，传入我们需要调用的控件的prop即可。通过之前的理解，了解了表单实际上是和model以及prop直接关联的，这里传参就不难理解了。调用时机，可以参考组件的文档或者按照我们代码的逻辑。这里可以用钩子on-success或者直接写在我们代码的await之后。

 successed(){
      this.$refs.ruleForm.validateField('businessLicenseUrl')
    },

或者写在这之间也可以。

7.这里有个细节，就是这个方法是表单控件的，假设某个属性是某个控件的，我们想操作这个属性，也可以通过获取到这个元素，然后再去操作。当我们需要某个元素按照他们预设的顺序执行一些逻辑的时候，我们可以按照他们的要求书写，当我们遇到一些他们没有解决的问题的时候，可以通过我们手动执行他们写好的逻辑来完成我们要的结果。

8.这里的图片上传的校验写法，里面的参数以及return的逻辑值得理解记忆一下。

9.编辑的接口和新增的接口不是同一个，当编辑页和新增页在同一页的时候，不要写错了，要判断是编辑还是新增，从而调对应接口。

10.在传参给函数的时候，可以通过三目运算来决定传哪个参数，这样可以把传参和逻辑写在一行代码里面。

11.删除数据前要有弹框，这个弹框通常是this.$confirm，确认框。然后这个函数是一个promise函数，所以后面要接.then和.catch，然后要注意，then和catch里面都应该是函数。

.catch(()=>{xxxx})这样才对。

12.删除的api记得加上method:'delete'，

13.删除操作最后记得刷新页面，即重新获取页面数据

14.el-form有个属性 label-position可以设置为top，这样字就显示在控件上方，如果不设置为top，就得通过label-width来设置宽度。

15.解构赋值的写法，左边好像得是定义的方式，如const，let这种，也就是解构赋值，终究只是一个快速赋值的方法，函数的参数虽然不需要写let这种，那是因为形参直接写就可以认为是定义。

我这种写法好像是不行的。

16.el-upload的limit要和on-exceed一起使用，前者限制文件上传数量，后者用来触发给用户的提示。

vscode快捷键

ctrl加上 回车，在当前行直接换行，不会打乱当前行，这样不需要每次都end到行末尾进行换行。

npm的报错解决

NPM install报错certificate has expired

1、取消ssl验证： npm config set strict-ssl false

这行代码跑了之后，再重新npm i，就可以了。

原文链接

NPM install报错certificate has expired_npm err! code cert_has_expired-CSDN博客

遇到嵌套表格的场景的时候，要思考内嵌的数据如何渲染，我遇到的是有展开功能的，也就是说数据的渲染是根据操作来的，所以数据渲染的容器是很关键的，目前最合理的做法是在外层表格获取数据的时候就先处理一下数据，预留下空位。同时这里map返回的对象，要是一个新对象，这样无污染。

然后，因为展开的时候能拿到当行的数据，所以可以通过这个方式把数据做关联。其实可以倒过来看，也是合理的思路，因为展开功能会返回当行的数据，那么我们每次展开的数据都利用当行的数据来保存就行了。