vue
lemon_tree1002
这个作者很懒,什么都没留下…
展开
-
vue3 + el-input 搜索框组件封装
vue3 + el-input 搜索框组件封装原创 2022-06-21 14:02:58 · 2988 阅读 · 1 评论 -
vue3 + el-dialog
vue3 + el-dialog原创 2022-06-21 10:53:25 · 3193 阅读 · 0 评论 -
VUE 全局注册新组件
背景:项目中经常很多页面会复用同一个组件,比如el-table,这时候,我们可以把el-table进一步封装,把在项目中常用到的属性,方法,样式,配置等都封装起来,作为一个新组件进行全局调用使用。问题:如何把自己封装的组件作为全局组件进行调用呢?做法:以我的经常操作习惯为例,通常会把封装的公共组件放进components中,比如:然后在scripts中将组件引入,并注册,如图:最后在main.js中引入scripts,并通过Vue.use注册,即完成了组件的全局注册,如图原创 2022-04-22 10:09:43 · 1107 阅读 · 0 评论 -
@vue/cli4热加载失效处理
一、由于项目中出现了上一篇文章中的错误:于是修改了:/node-modules/sockjs-client/dist/sockjs.js 1603行self.xhr.send(payload); 此行被注释掉了;后来发现,这个修改也会导致热加载失效,虽然我不清楚为什么,但是亲测确实会引起失效,当然了,这只是其中一个原因;还需要进行下面的操作后,才可以保证字符正常:二、1.安装webpack-dev-servernpm install --save-dev webpack-de原创 2022-04-13 15:26:26 · 2350 阅读 · 0 评论 -
/sockjs-node/info?t=xxxxxxxxx net::ERR_CONNECTION_TIMED_OUT
运行vue项目,发现有这样的报错:/sockjs-node/info?t= net::ERR_CONNECTION_TIMED_OUT而且会一直报错,简直很令人讨厌,于是乎找到了解决办法:如下:注释掉 /node-modules/sockjs-client/dist/sockjs.js 1603行self.xhr.send(payload); 注释掉就好了这里1603行呢,也不是十分精准的就这行,但是大差不差,在它周围找到self.xhr.send(payload);注释掉就齐活。原创 2022-04-11 16:15:34 · 1235 阅读 · 0 评论 -
el-table sort-method
el-table本身具备排序属性:sortable,默认值为true,则开启排序但是,此排序是按照字符Unicode编码格式排序的,所以如果该列是中文或者中文和其他字符的混合物的时候,通过sortable提供的排序出来的结果,不符合我们的预期。接下来的代码可以解决该问题,希望可以给大家提供帮助,也给为自己记录下来。 <el-table :data="tableData" style="width: 100%" :key="tableKey" border原创 2022-03-14 15:00:31 · 1826 阅读 · 1 评论 -
vue-008-如何做到在不同尺寸显示器,浏览器100%分辨率下,页面完整展示
前一阵测试提交故障,说在屏幕较小的电脑上系统页面显示不全,需要通过拖拽的方式才可以显示,要求修改成不同储存电脑屏幕下100%分辨率情况下页面又要展示完整,于是就有了这篇发文。我的解决办法如下:在App.vue文件中,加入以下代码即可:methods: { bodyScale() { var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可视区域宽度 var scale =原创 2021-12-24 16:51:28 · 2315 阅读 · 3 评论 -
VUE-007-动态改变元素属性
方法:给元素加ref属性,令ref=”something”,然后在methods中通过this.$refs.something.属性.要改变的内容=xoxoxoxox例如:this.$refs.border.style.marginTop= 0 + 'px'原创 2021-12-24 16:41:54 · 1644 阅读 · 0 评论 -
VUE-006-el-table拖拽表头页面显示异常(二)
el-table拖拽表格宽度导致页面异常 <el-table-column fixed="right">情景2:问题列fixed="right"此时拖拽最后一列宽度,导致页面异常,如下:解决办法1:最后一列 el-table-column不要设置width,如下:解决办法2:倒数第二列加属性 :resizable="false",如下:这样设置后,最后一列尺寸就不可以被改变了。...原创 2021-12-21 16:34:42 · 810 阅读 · 0 评论 -
VUE-006-el-table拖拽表头页面显示异常(一)
情景1:表格最后一列加fixed="right" width="250" 属性 VS 倒数第二列给定width="200",异常如下:解决办法:倒数第二列不指定width宽度即可正常,例如:原创 2021-12-21 16:31:11 · 235 阅读 · 0 评论 -
VUE-005-el-table视效调整
header属性修改:<el-table :header-cell-style="tableHeaderStyle"></el-table>给el-table增加header-cell-style属性后,在methods中定义其属性即可:tableHeaderStyle([row, column, rowIndex, columnIndex]) { return "height: 42px;font-size: 14px;color: #4D4D4D;lin.原创 2021-12-21 16:03:06 · 331 阅读 · 0 评论 -
VUE-004-动态给style赋值
<el-button :style="{width: buttonWidth}"></el-button>比如:当判断当前界面是英文模式下,width是90px,中文模式下,width是80px;<script> computed: { buttonWidth: function() { return getLang() == 'zh_CN' ? 80 + 'px' : 90 + 'px'; }.原创 2021-12-21 15:26:19 · 2457 阅读 · 0 评论 -
VUE-003-页面跳转
方法一(跳转到其他网站,target="_blank"):<a :href="link" target="_blank"> <el-button type="text" size="small">跳转</el-button></a><script> expott default { data() { return { link: "https://原创 2021-12-21 15:02:57 · 333 阅读 · 0 评论 -
VUE-002-el-table-column两种赋值方式
赋值方法1. 使用prop<el-table :data="tableData"> <el-table-column prop="date" width="200" label="日期"></el-table-column></el-table>赋值方法2. 嵌套一个template<el-table :data="tableData"> <el-table-column label="日期" width=原创 2021-12-21 11:08:10 · 4516 阅读 · 0 评论 -
VUE-001-在el-table-column表格单元格中添加url跳转链接
普通文字样式的展示,赋值方式为:prop<el-table-column prop="url" label="链接" width="400" show-overflow-tooltip></el-table-column>将文字url变成链接,赋值方式为:嵌套template,使用scope.row.data赋值<el-table-column label="链接" width="400" show-overflow-tooltip> <temp原创 2021-12-21 10:48:34 · 4561 阅读 · 0 评论