Vue,JavaScript框架,前端开发框架,Vue问题集合

Vue如何使用过滤器

2023-03-28

很多时候，后端给接口的数据不是我们要的，我们就需要Vue使用过滤器，转换成我们想到的结果数据。模板代码：<template> ;;<div> <p>{{data.actors|actorfilter}}</p> ;;</div> </template> js代码<script> import Vue from 'vue' Vue.filter("actorfilter",function(data){ var newlist = data.map(item=>item.name) return newlist.join(' ') }) </script>

elementUI el-table 表格实现手动选择展示列

2022-09-29

1556 0

一、使用场景：在使用elementui开发表格功能的时候，我们会遇到表格字段列数过多的情况，这时我们就需要对其进行设置，选择是否展示列，默认展示多少列，还有就是到处表格数据的时候，我们可以指定选择列到处，这样体验方面是很好的。二、效果展示：点击操作按，展开筛选类选项三、实现思路：（1）表格默认展示所有字段，每个字段通过 v-if 属性来进行判断是否显示；（2）点击表格最后一列表头（操作栏），弹出选择框；【el-popover】（3）选择框中包括：全选复选框、所有字段复选框组、取消按钮、确定按钮；【el-checkbox-group】（4）选

vue中element-ui固定el-dialog模态窗高度

2022-01-10

3084 0

vue中element-ui固定el-dialog模态窗高度，超出显示纵向滚动条，可以使用下面方法<style lang="css"> .el-dialog { ;margin: 5vh auto !important; } .el-dialog__body { ;height: 75vh; ;overflow: hidden; ;overflow-y: auto; } </style>

vue+file-saver+xlsx导出table表格为excel

2021-10-14

1614 0

1、下载两个依赖npm install file-saver --save; npm install xlsx@0.17.5 --save ;2、封装成一个独立的组件outTable.vue<template> ;;;<el-button size="mini" round type="primary" @click="exportExcel">导出Excel</el-button> </template> ; <script> import FileSaver from 'file-saver' import XLSX from 'xlsx' export default { ;props: { ;;;id: { ;;;;;type: String, ;;;;;default: 'Table' ;;;}, ;;;name: { ;;;;;type: String, ;;;;;default: 'Table' ;;;} ; ;}, ;data () { ;;;return {} ;},

Vue实现点击按钮执行订单数据打印功能

2021-10-13

1980 0

点击按钮实现打印页面的功能，在很多系统中非常常见，以下是vue的一个打印功能插件，供大家参考：1、安装;;npm install vue-print-nb –save 2，引入;安装好以后在main.js文件中引入;;import Print from 'vue-print-nb' ;Vue.use(Print);;//注册 3、使用<el-table border stripe ;id="printTest"> ;;;;;;;;;;;;;;;<el-table-column align="center" type="selection" width="55"></el-table-column> ;;;;;;;;;;;;;;;<el-table-column label="ID" prop="id" min-width="20"></el-table-column> ;;;;;;;;;;;;;;

vue中element-ui设置el-dialog点击空白背景不关闭

2021-10-11

2565 0

vue中使用elementUI框架的el-dialog模态窗口，有时我们会不消息点击到空白蒙版就自动关闭了，我可以关闭这个，这样就不会导致我们辛辛苦苦输入的东西都没了，我们可以给el-dialog加个属性即可;:close-on-click-modal="false" 详细demo: <el-dialog title="添加商品分类" :visible.sync="addDialogVisible"; width="30%" @close="addDialogClosed" :close-on-click-modal="false">  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width=

vue-quill-editor富文本编辑器工具栏汉化教程

2021-08-25

2864 0

效果：vue-quill-editor默认是英文的工具栏，为了方便用户使用个体验，我们可以对它进行汉化。我们通过css样式来对富文本编辑器进行汉化，具体代码如下：<style> .ql-snow .ql-tooltip[data-mode=link]::before { ;;;content: "请输入链接地址:" !important; ;} ;.ql-snow .ql-tooltip.ql-editing a.ql-action::after { ;;;;;border-right: 0px !important; ;;;;;content: '保存' !important; ;;;;;padding-right: 0px !important; ;} ; ;.ql-snow .ql-tooltip[data-mode=video]::before { ;;;;;content: "请输入视频地址:" !import

解决Vue ui安装less和less-loader版本过高不可以用问题

2021-08-13

2416 0

Vue ui可视化界面中直接安装less和less-loader依赖会发现可以安装成功，但是后续使用的时候会提示less-loader版本过高问题解决方法1. 对于less可以直接在可视化界面中安装即可2、less-loader已安装可以卸载，再次安装指定版本cnpm install less-loader@7.1.0 --save-dev 安装好之后就不再报错了，在vue ui面板也可以看到依赖。

解决vue ui 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件

2021-08-12

2535 0

vue ui 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件。1、进入node.js的安装目录中查看一级目录下是否存在vue.cmd指令2、安装vue uinpm install -g vue npm install -g @vue/cli 3、安装完成后，通过如下任意指令查看vue的版本：vue --version / vue -V 4、在此运行vue ui，成功运行

Vue+ElementUI表格实现点击图片预览功能

2021-08-06

3867 0

功能描述：用户点击表格列表其中一张图片，显示弹窗，并显示图片。实现思路：给图片添加点击事件，点击图片获取图片url，展示图片效果展示：实现代码：1、给表格列图片添加点击事件，传递参数<template> <el-table :data="VipList" border stripe @selection-change="handleSelectionChange" v-loading="loading"> <el-table-column align="center" type="selection" width="55"></el-table-column> <el-table-column label="ID" prop="id" min-width="50"></el-table-column> <el-table-

Vue+ElementUI实现点击按钮刷新页面

2021-08-06

3258 0

vue中ElementUI刷新页面代码html按钮代码<template> <div> <a href="javascript:;" title="刷新" class="refresh" @click="refresh()"><i class="el-icon-refresh-left"></i></a> </div> <template> js部分代码：刷新页面主要用到this.$router.go(0)或window.location.reload()<script> export default { methods: { ; // 刷新 ; refresh(){ ; ;this.$router.go(0) ; ;//或 ; ;window.location.reload() ; } } } </script>

Vue+ElementUI实现点击按钮全屏功能

2021-08-05

2951 0

用vue做网站后台的时候，我们有时需要做个点击按钮进入全屏的功能，以下是个案例，共大家参考。按钮模块代码<template> <div> <a href="javascript:;" title="全屏" @click="screen()"><i class="iconfont icon-quanping"></i></a> </div> </template> js部分代码：<script> ;;export default { ;;;;data(){ ;;;;;;return{ ;;;;;;;;//全屏 ;;;;;;;;fullscreen: false, ;;;;;;} ;;;;}, } ;;;;;;screen(){ ;;;;;;;;let element = document.documentElement; ;;;;;;;;;;if (this.fu

vue部署项目实现子目录访问方法

2021-08-04

1292 0

前后端分离，使用同个域名，比如首页使用www.example.com，后台使用www.example.com/admin访问。1、修改路由文件下的index.js，加入base:'/admin/',代码const router = new VueRouter({ ;base:'/admin/', ;routes }) 2、vue.config.js增加如下配置：publicPath: '/admin/' 3、配置好之后，打包项目npm run build 4、服务端新增目录admin，将前端文件上传至该目录即可。

vue 富文本编辑器vue-quill-editor自定义图片上传（非base64图片）

2021-08-03

1222 0

vue-quill-editor有图片上传功能，因为vue-quill-editor是将图片转为base64编码，所以当图片比较大时，提交后台时参数过长，导致提交失败。所以我们需要自定义图片上传，把图片上传到服务器的形式。1、;安装富文本编辑器npm install vue-quill-editor –save 2、;main.js引入编辑器import VueQuillEditor from 'vue-quill-editor' Vue.use(VueQuillEditor); import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' 3、;html代码模块<template> ;;;<div> ;;;;;;;;;;;;;<el-upload ;;;;;;;;;;;;;;clas

Vue ElementUI如何使用组件，组件的使用方法实例

2021-07-25

1481 0

开发项目过程中，涉及重复的代码，比如模态窗，我们可以封装起来，然后采用组件的形式，引入即可，这样也方便维护。以下我们来封装Dialog 对话框组件1、创建Dialog组件我们在项目目录下创建\src\components\Dialog.vue<template> <el-dialog;title="提示";:visible.sync="DialogVisible";width="30%";@close="DialogClosed";> ;;<span>这是一段信息</span> ;;<span;slot="footer";class="dialog-footer"> ;;;;<el-button;@click=&quo

Vue组件如何赋值给父组件

2021-07-24

1461 0

在vue项目开发中，我们遇到重复的代码，就可以封装成组件，这就设计到组件之间的获取值和赋值问题，我们可以通过以下方式传递值给父组件页面。1、子组件赋值：使用this.$emit()this.$emit('tran','Hello;Word')2、父组件页面绑定方法获取值<UploadPhotos;ref="showUpload";@tran="getUser"></UploadPhotos>3、父组件获取到值之后赋值<script> export;default;{ ;;data;();{ ;;;;return;{ ;;;;;;addForm:;{ ;;;;;;;;ad_img:;'', ;;;;;;}, ;; ;;;;} ;;}, ;;compon

vue-quill-editor安装多图上传插件

2021-07-24

1274 0

vue-quill-editor的是使用、安装这里不多说，需要的话可以使用参考这篇文章vue-quill-editor默认只能使用单图上传，很不方便，这里教大家如何安装多图上传插件quill-image-drop-module，就可多张拖拽上传1、;安装npm;install;quill-image-drop-module2、页面引入import;{;ImageDrop;};from;'quill-image-drop-module'; Quill.register('modules/imageDrop',;ImageDrop);在editorOption的modules里配置：imageDrop:true,

关于vue echarts二次渲染不渲染问题的解决方法

2021-07-20

2350 0

vue中用了echarts数据统计图，发现动态赋值不显示，对于不渲染问题，我们只需在methods方法下重新渲染即可解决该问题前端代码：<template> ;;;;<div> <div;id="main";style="width:;100%;height:545px;"></div> <div> <template>js代码：<script> import;*;as;echarts;from;'echarts'; ;;methods:;{ ;;;;async;getSys;();{ ;;;;;;const;{;data:;res;};=;await;this.$http.get('system') ;;;;;;if;(res.code;!=;200);{ ;;;;;;;;;;;this.$me

vue ElementUI使用时间日期、时间选择器的使用方法

2021-07-20

1734 0

效果展示：vue ElementUI提供了三种时间日期1、TimePicker 时间选择器：用于选择或输入日期2、DatePicker 日期选择器：用于选择或输入日期3、DateTimePicker：日期时间选择器，在同一个选择器里选择日期和时间本文主要用到DateTimePicker 日期时间选择器<template> ;;;;<div> <el-form-item;label="时间";prop="addtime"> <el-date-picker;v-model="addForm.addtime";type="datetime";placeholder="选择日期时间";format="yyyy-MM-dd;HH:mm:ss&quo

解决vue-animate-number后端返回数据不渲染问题

2021-07-19

1613 0

最近开发中用到了vue-animate-number组件，发现数据不能通过接口返回的值自动渲染。代码如下<animate-number;from="0";:to="countArt";duration="1000"></animate-number>看似没什么问题，后面才发现没加上:key="countArt"的原因，加上之后就能正确渲染了<animate-number;from="0";:to="countArt";:key="countArt";duration="1000"></animate-number>

Vue+elementUI如何使用文件Upload 上传文件

2021-07-18

1437 0

vue+elementUI实现上传案例实现对图片进行移除、上传、修改、点击图片对图片进行预览1、html代码部分<template> ;;;;<div> ;;;;;;;;;;;;<el-form;:model="setupForm";ref="setupFormRef";label-width="100px"> <el-form-item;label="登录LOGO";prop="logo"> <el-upload;:action="uploadURL";:on-preview="handlePreview" :on-remove="handleEditRemove2";list-type="picture";:headers=&quo