sinat_34896766的博客

【代码】Naive UI 分页组件二次封装。

在vue.config.js中添加以下配置，再重启项目即可。

【代码】vscode格式化代码配置文件。

有时候，按以下方法写的el-table的操作列会不显示内容，可用 “template 里面的属性改为 #default="scope"。重点：【template外围标签el-table-column 加上 key="slot"属性】” 的方法修改。

computed: 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值method 调用总会执行该函数watch : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

【代码】el-table 树状表格展开及折叠。

【代码】el-table 树状表格查询符合条件的数据。

【代码】vue中实现操作。

但会出现点击清除图标，再输入数据，远程搜索数据下拉框不显示，可采用添加“trigger-on-focus” 和“v-get-selected-value”属性解决问题。使用基础用法，如上时，会存在下拉框不跟随输入框滚动的情况，添加“popper-append-to-body” 即可解决不跟随滚动的问题，

【代码】判断list中的对象是否有空数据。

在el-steps外套一层div，设置overflow为auto。在修改el-steps的css样式即可。

【代码】el-table动态配置显示表头。

el-select存在会跟着页面滚动的问题，加上:popper-append-to-body="false"属性即可使下拉框跟随el-selct滚动。

如下写法即可解决纯前端分页问题。

在实际工作中，通常数据都是后台接口返回的，有时需要对数据进行合并，可利用el-table的span-method方法，结合数据处理，进行合并，如下实例。

给el-date-picker 添加align="right"属性，让其与输入框右对齐，即可。

el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete>el-complete可以实现后台远程搜索功能，但有时传入数据为空时，接口可能会报错。此时可在querySearchAsync方法中，根据queryString判断，若为空，则不掉用接口，直接callback([])，反之则调用接口，返回数据。

【代码】el-table实现后台排序。

【代码】判断对象数组中是否有重复数据。

【代码】解决子组件中el-dialog关闭地调用两次接口问题。

【代码】{ name: ‘姓名‘, age: ‘年龄‘, sex: ‘性别‘}对象转为数组。

在实际工作中，有时会需要动态显示表格数据，可采用以下方法。

【代码】js获取对象中的key值。

【代码】el-pagination的current-change传递参数。

【代码】el-select选项框内容过长。

会出现新的分支信息，这时，再执行以下命令，即可成功切换分支。首先使用一下命令，查看本地及远程的所有分支。切换之后，可通过以下命令查看分支是否切换成功。若没有对应的分支，执行以下命令，拉取分支。该问题是由于没有对应分支的原因。

假设后端接口返回的数据为data，且有两个筛选条件：name和id，在此要对数据先进行筛选，再实现分页。在跳页、搜索等按钮点击的时候，将页数修改为对应数据，再调用dataFilter()方法即可。表格采用elementUI的el-table，只需要对数据data进行处理赋值即可。由于接口返回数据过慢，故而采用前端对数据进行处理分页的方法实现表格分页及条件查询。三、跳页，搜索等功能。

remote: 执行此操作需要Git"GenericContribute"权限。此原因是账号没有权限，添加权限即可。

利用el-row的type属性，将type设置为flex，启用flex布局，再设置justify和align属性，即可避免该问题出现。

Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。

1、解析（parser）HTML，生成DOM树；2、同时解析css，生成样式规则；3、根据DOM树和样式规则，生成渲染树；4、进行布局Layout（回流），根据生成的渲染树，得到节点的几何信息（位置、大小等）；5、进行绘制Painting（重绘），根据计算和获取的信息进行整个页面的绘制；6、展示再页面上。当渲染树中部分或全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程。

git查看配置（如果配置信息太多，需要退出，输入q，即可退出）git bash （终端）清屏。推送到远程仓库（首次）推送到远程仓库（重复）本地初始化git仓库。

将.eslintrc.js文件中的ecmaVersion修改为2020。

可以方便的查看依赖包的安装、使用说明及相关注意事项等。

已有git仓库，要切换提交的仓库地址，用以下命令。

4、在组件的setup语法糖中，通过调用函数配合解构赋值把函数内部的数据和方法在组件中可用。1、找到组件中属于同一个业务逻辑的所有代码（响应式数据 + 修改数据的方法）3、在use函数内部，把组件中要用到的数据或者方法以对象的方式导出。一旦组件从一个变成了多个，必定形成嵌套关系，从而增加通信成本。打头的方法，把第一步所有的业务逻辑代码都放入。对原生js函数的理解要求高了。组件增加复用，增加可维护性。逻辑的复用，增加可维护性。

/ 放置全局指令// 管理员权限// el 使用自定义指令的dom元素// binding 对象，binding.value 可以接受外部传过来的值// 管理员账号单独处理returnif (!// 隐藏el// display的设置，可以通过开发者工具修改，建议使用remove})

4、使用svg精灵图：新建一个svg标签，内层嵌套use标签，使用use标签的 xlink:href属性，引用symbol的id，1、把所有的svg精灵图都包裹到一个svg标签中。2、把内层svg的标签都修改为symbol。3、给每个symbol标签，添加id。

流程：前端调用到导出excel接口 -> 后端返回excel文件流 -> 浏览器会识别并自动下载。流程：前端获取要导出的数据 -> 把常规数据处理成一个excel文件 -> 浏览器识别下载。场景：大部分场景都有后端来做。场景：少数据量的导出。

利用微软提供的Office Online平台，即可实现在线预览doc、ppt、excel等文档。contractUrl：是要预览的文件的地址。previewURL：是微软提供的地址。点击合同名称，即可跳转新页面，预览文档。