sinat_33255495的博客

它是一种分发 Vue 组件中可复用功能的使用方式，mixins 是一个 js 对象，包含我们组件script中的任意功能选项，如：data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中，当组件使用 mixins 对象，所有 mixins 对象的选项都将被扩展到该组件本身的选项中，提高代码的重用性，易于代码维护。当多个组件中的数据或功能很相近时，可以通过 mixins 将公共部分提取出来，进行封装。

vue-router 使用详情vue-router实现原理SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是:更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。1、hash模式随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —

vue-router实现原理SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是:更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。1、hash模式随着 ajax 的流行，异步数据请...

draggable标签的属性。options配置项。

这里有一点要注意的是：v-html 的样式，直接写在外部样式可能不会生效。可以尝试使用穿透样式（::v-deep 或者 >>>）这种是通过截取字符串的方式实现滚动，如果文本中含有 html 标签的时候可能会出现标签展现在页面中的情况。

今天在用 el-table 的时候遇到这样一个报错，排查了好久才找到一点眉目。

select下拉框中的数据是动态返回的，可以通过设置 v-model 的值来控制默认值的展示。options 赋值的时机在 绑定的value 之后。解决问题的关键当然也在于。如果 options 是由接口返回的，这种就需要注意调用接口的顺序了。其实我想实现的是默认值为：第二季度。

（2）在 axios 中设置 responseType 为 blob，指定处理 二进制数据；（3）通过创建 a 标签，设置 download 属性，实现点击下载。（1）使用 axios 从服务器获取文件的二进制数据；下载任何文件的思路相同，只需配置相应的文件类型即可。

最近接到的一个新需求：实时搜索文档关键字并高亮显示，听起来好难的样子，仔细分析起来其实也蛮简单的。

而选择事件默认又会插入对象到数组中，所以就需要在事件中单独处理一下这个选中的数据了。如果想正确展示的话，需要处理 value1List 的格式为 简单数组，例如。支持选择内容为对象，只需 value 绑定对应的对象即可。如果想实现选中的内容为对象的话，那么官方。

el-collapse 折叠面板组件允许我们通过设置 v-model 来控制展开的面板。如果我们想要在折叠面板的标题中包含一个输入框，并且点击输入框时禁止面板展开，可以通过自定义事件处理来实现。

只需在需要的地方，使用 svg 引入图标即可。需要注意的点是：xlink:href用哪个图标，其属性值必须是 #icon-图标名字。在assets/icons/ 下引入 svg 格式的文件，并给图标命名。

【代码】vue实现富文本编辑器的具体方法。

在项目的开发过程中，我们经常会注册很多公共的组件，以增强代码的可维护性，减少开发工作量。但是如果我们一个个去注册的话，就会在入口处写很多代码，这时我们就可以考虑使用 自定义插件 的方法一次性把所有的组件全部注册。

我们都知道 svg 文件比图片小的多，可以节省很多空间，这对页面性能来说是个很大的提升。额外说明：我的 svg 文件是放在 assets/icons 下的。

【代码】el-tooltip 实现富文本渲染。

element 官方给出的解决办法是使用doLayout，使用doLayout重新加载一下table就好了。

【代码】element ui 多语言切换时表头不切换的解决方法。

在 vue-router 里，滚动行为设置。下面为你详细介绍滚动行为设置的作用和使用方法。

【代码】vue 自定义指令实现 el-table 的无限滚动。

Vue CLI：功能强大，支持多种配置和插件，适合复杂项目。Vite：开发体验极佳，启动速度快，适合现代前端项目。官方模板：简单快捷，适合快速上手。StackBlitz 和 CodeSandbox：在线编辑，无需本地环境，适合快速原型开发和学习。你可以根据自己的需求和偏好选择适合的方法来创建 Vue 3 项目。

如果要实现鼠标辅助触发滚动条的移动，需要借助 mousedown，mouseup，mousemove 三个事件，通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。在做弹窗、表单或 tab 切换需求的时候，有时候因为内容过长会导致出现滚动条，但是只能拖动滚动条时会导致操作不便，我们会希望实现通过拖动内容区实现滚动条的滑动。这样操作就会简单多了。为方便复用，我们可以创建一个类来封装鼠标事件，使用时把事件挂载到指定容器即可。这样就实现啦，就是如此简单！

在某些需求里需要用到 行列转置 的表格，但 el-table 提供的基本表格是不支持行列转置的，这样就需要对这个表格进行二次开发。

例如，定义一个message数据模型用于绑定输入框，创建sendMessage方法处理发送消息的逻辑，包括将用户输入的消息发送到后端API，并接收AI的回复。创建对话组件：在src/components目录下，创建一个如Chat.vue的组件文件，用于实现对话功能。注册对应AI平台的账号，进入账户设置页面找到“View API Keys”或类似选项，创建属于自己的API密钥，并妥善保存。确定要接入的AI模型，如OpenAI的gpt-3.5-turbo、科大讯飞的星火大模型等。

这里总结以下要点啊，首先嵌套就是 el-table 中再套一个 el-table，但重点是子表格不要显示表头，而且样式要自己写，尤其是要通过重写表格样式。这里只是粗略实现了样式，需要的同学自行优化样式。

如果你想实现一个下拉树的组件，可以直接使用 element plus 中的 treeSelect 组件，但是如果你的项目正在用的是 element 2.X 版本，那么它是不包含 treeSelect 组件的，但是我们还是可以基于一些第三方的插件 比如：@riophae/vue-treeselect 插件。

日期筛选，但限制只能选择同一个月的数据，故此应该去掉右侧月份面板。

select组件的远程搜索需求，通过 input 输入框进行筛选，当选择确认之后在选中的内容之后还有输入的文案，这时需要手动去清除。我们可以通过 ref 来获取 dom，其中 dom 的 query 字段即为我们 input 输入的内容。后，清空 query 的值即可。当选择完成之后，即触发。

表格样式较为复杂，10条数据超出整个屏幕的高度，因而导致无法快速拖动滚动条，所以提出需要在表格内容区拖动鼠标，从而实现无需滚动到底部就可以左右拖动表格内容的效果。实现的方式通过注册一个自定义指令，方便随时调用这个鼠标拖动的能力。

是一款 js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、ElementUI。你可以用来拖拽div、table等元素。这里我们借助 sorttable 来实现 el-tabs 的拖拽功能。

【代码】Mock.js 的使用方法代码示例。

这是将本地文件上传到腾讯云服务器的基本方法，官方也有相应的文档，需要的同学可以去官方文档查看。，着急的同学可以 跟着以下步骤快速实现。

el-table 中有现成的隔行换色功能，只要增加 stripe 属性即可。但是如果有单元格合并的话，这个属性就不可用了。这时候我们就需要动点小心思了。

这时候如果需要设置必填项，此时的 require 需要配置在 el-input 中，或者直接配置在 rule 中。出现的原因是在el-form-item中使用了required属性，同时又用rules自定义了表单验证规则。

具体编写规则参照官方文档：https://vue-styleguidist.github.io/docs/Documenting.html。生成配置文件及安装 vue-cli-plugin-styleguidist （vuecli 的对应插件）在我们的项目中，只要你想你就可以根据配置生成自己想要的组件文档，支持网页端展示。默认会识别 src/components 下的组件文件.配置package.json脚本。（3）根据文档要求增加注释。（4）生成组件说明文档。

由于现代浏览器的安全策略，特别是对于弹窗窗口的限制，直接使用 window.open 可能会被浏览器阻止或放入通知中心，尤其是当它是由非用户直接操作触发的时候（比如响应鼠标点击以外的事件）。需要实现一个动态路由，并且点击进来加载的页面是第一个有权限的页面。钩子中加入跳转逻辑，从获取的动态路由中匹配第一个加上即可。如果要跳转到其他项目的页面，可以通过。

我们在使用 zb-table 表格组件的时候，有时候会通过 props 中的数据进行判断，但这时候在style 的回调方法中无法使用 this，这就很尴尬了。通过在全局定义 _this，然后在 created 钩子函数中将 this 赋值给 _this 即可。

在写样式的时候，前面加上前缀就可以区分了。

我们在写弹出的遮罩层时，下方的页面依然可以滚动，这时我们就要想些办法来实现了。

通过嵌套表头将两个标题设置在一个单元格内，再通过 CSS 样式增加斜线效果。知识点：el-table、::before、transform。