vue
System.out.print
这个作者很懒,什么都没留下…
展开
-
vue 离开编辑页面,提示用户还未保存,是否
1、在应用类进行路由跳转、在需要提示的页面添加如下钩子函数beforeRouteLeave (to, from, next) { this.$confirm('当前页面数据还未保存,是否离开?', { type: 'warning' }).then(res => { next() }).catch(reason => { next(false) })},2、关闭网址或者浏览器时,提示用户在需要提示的页面加入钩子函数destroyed(原创 2021-08-30 17:03:54 · 1927 阅读 · 3 评论 -
vue element表格合并第一列,合并的行数=表格行数
<el-table :data="arr" :span-method="(({row, column, rowIndex, columnIndex})=>objectSpanMethod({row, column, rowIndex, columnIndex},arr))" border> <el-table-column prop="opinionType" width="110px" align="center"> <template slo.原创 2021-08-12 14:49:27 · 653 阅读 · 0 评论 -
element 有合计项表格固定列,固定列的滚动条拖不动
在css中添加样式 .el-table__fixed, .el-table__fixed-right { pointer-events: none; } .el-table__fixed, .el-table__fixed-right > .td { pointer-events: none; }原创 2021-07-29 17:39:51 · 469 阅读 · 1 评论 -
服务器升级,导致vue前端打包不起,报node-sass异常
问题出现在node-sass上主要是node-sass编译需要c++环境,需要在服务器上安装cpp原创 2021-06-28 18:29:09 · 131 阅读 · 0 评论 -
vue Object.assign 导致数据回填,输入框不可以输入,也不可以删除值。
1、业务场景,在页面中,监听输入框值改变,就将值存入本地缓存。下次进入页面的时候,提醒用户还有没保存的数据,是否立即编辑。2、代码如下: watch: { form: { handler(newVal) { this.saveForm(); }, deep: true }, other...原创 2020-04-27 14:28:35 · 976 阅读 · 0 评论 -
vue this.$router.go(-1); 或者 this.$router.back() 返回时怎么带参数
1、声明一个空的Vue模块goBackEntityimport Vue from 'vue' /** * 定义空的vue实例,作为 goBackEntity实现非父子组件之间的通信(vue2.x中去掉了broadcast) */var goBackEntity = new Vue({});export default goBackEntity;2、在需要传参数的页面...原创 2020-04-22 11:27:54 · 28852 阅读 · 8 评论 -
vue 使用 sortablejs 拖着el-table行,使行顺序修改
1、安装 sortablejsnpm i sortablejs --save2、再要使用的引入,或者全局引入也可以,但是我是在使用的地方引入的import Sortable from 'sortablejs'3、直接看代码吧<template> <div> <el-table :data="tableData" border i...原创 2019-12-30 16:12:41 · 3529 阅读 · 5 评论 -
vue: el-table 最后一列操作列设置为fixed后,最后一行有时候显示不完,感觉被遮挡了一半
一、先看解决方案:1、只修改当前页面样式: 给table设置class="tableClass" 在样式中:<style lang="less" > .tableClass { .el-table__fixed-right { height: 100% !important; //设置高优先,以覆盖内联样式 }...原创 2019-12-26 10:41:57 · 13993 阅读 · 4 评论 -
vue el-image>查看大图修改关闭按钮样式
如<el-image :src="img" class="img"></el-image><style lang="less"> .img { .el-icon-circle-close { color: white; } }</style>原创 2019-12-11 18:01:55 · 6856 阅读 · 3 评论 -
Vue:输入框赋值后无法再编辑输入框的值
可从vue官方文档中找到一句话:根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新可以发现,引起这个问题的原因可能是你,在data中没有定义这个属性,导致赋值可以赋上,但是再次修改的时候,修改不了,也删除不了。因为数据是双向绑定的:vue底层在渲染dom,然后再展示数据,然后编辑的时候,vue底层,找不到这个属性,那肯定编辑不了了...原创 2019-12-10 16:08:59 · 5156 阅读 · 1 评论 -
vue,在打开弹框的时候,调用this.$refs.xxx.clearFiles();报错
报错信息,大概就是,这个元素还没创建,就根据refs,找到该元素调用元素的方法。肯定不行啊,元素都还没有,怎么调用,再后端,相当于空指针异常。解决:this.$nextTick(()=>{ this.$refs['xxxx'].clearFiles();})加上上面方法,可以理解为延迟执行了...原创 2019-11-12 14:45:29 · 7119 阅读 · 0 评论 -
el-table-column内容不自动换行,超出的以...显示,鼠标悬浮在上面,在该列上弹出框显示
实现:<el-table-column prop="userName" label="用户名" show-overflow-tooltip></el-table-column>主要添加show-overflow-tooltip 属性就可以了原创 2019-11-04 15:59:36 · 5903 阅读 · 3 评论 -
vue elementUI 覆盖el-tree的样式,选中的背景颜色修改
<style> .el-tree-node.is-current > .el-tree-node__content { background-color: #2F8DFB !important; color: white; } .el-checkbox__input.is-checked+.el-checkbox__label { col...原创 2019-10-29 16:59:27 · 9232 阅读 · 0 评论 -
vue 覆盖elementUI的样式,如覆盖el-form表单的样式
vue 覆盖elementUI的样式,如覆盖el-form表单的样式例如:el-form 表单中的el-form-item,修改校验后的错误信息样式实现:<template> <div> <el-form :model="addForm" :rules="rules" class="demo-ruleForm"> ...原创 2019-10-29 16:44:50 · 7010 阅读 · 0 评论 -
el-upload,实现照片墙的效果,并且只能上传单张
1、说明:elementUI中的el-upload组件中有此效果,但是是上传多张的。 效果如图: 预期效果是这样的: 2、实现:思路,用单个图片上传效果,然后给图片添加蒙版,在蒙版中添加放大、删除、修改图标3、实现:<div style="width: 360px;height: 180px;" class="img_...原创 2019-10-25 16:52:31 · 3472 阅读 · 2 评论 -
el-image组件实现,多张图片全展示,并实现大图循环预览,点击随意一张,大图首先显示该张,其余一次循环展示
1、随意点击一张,大图首先展示该张,并且点击下一张,到最后一张后显示第一张,一次循环2、效果:点击第四张,大图第一张为第四张的图 3、实现:<el-image v-for="(img,index) in imgArr" :src="img" :preview-src-list="getImgList(index)"></el-image>...原创 2019-10-25 16:05:25 · 11498 阅读 · 27 评论 -
vue el-form 表单对象里还有对象,多层嵌套校验,制定校验规则
<template> <div> <el-form ref="dataFrom" :model="dataFrom" :rules="rules"> <el-form-item label="用户名" prop="userName"> <el-input v-model="dataFrom.userNa...原创 2019-07-19 13:47:21 · 9193 阅读 · 3 评论 -
vue 父组件调用子组件
1、在父组件里引用自组件<generate-report @closeAddReport="closeAddReport" ref="addreport"></generate-report>2、在子组件中写对应的方法methods: { childMethods() { alert(12) },}3、在父组件中调用...原创 2019-07-30 14:46:55 · 146 阅读 · 0 评论 -
vue 校验规则收集--持续更新
1、校验是否是double类型let checkIsDouble = (rule, value, callback) =>{ var reg = /^\d+(?=\.{0,1}\d+$|$)/ if (!reg.test(value)) { callback(new Error("请输入正确值")) ...原创 2019-09-11 16:26:48 · 547 阅读 · 0 评论 -
vue 阻止事件冒泡
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。...原创 2018-12-12 14:23:55 · 255 阅读 · 0 评论 -
vue 表单自定义校验方法
所用组件:Element UI直接上代码<el-form :model="editForm" :rules="editFormRules"> <el-form-item :label="角色名" prop="roleName"> <el-input v-model="editForm.roleName"原创 2018-10-24 17:16:13 · 2968 阅读 · 0 评论 -
el-form 表单检验,提交的时候只校验部分
<template> <div> <el-form ref="dataFrom" :model="dataFrom" :rules="rules"> <el-form-item label="用户名"> <el-input v-model="dataFrom.userName"></el-i...原创 2019-07-19 13:07:20 · 4403 阅读 · 0 评论 -
vue el-date-picker 组件,月份选择器,传到后台后比实际选的少一个月
不仅仅是月份,天数也是这样。如何解决呢 <el-date-picker v-model="searchForm.groupMonth" type="month" value-format="yyyy-MM" placeholder="请选择月份"> ...原创 2019-07-12 10:02:08 · 5535 阅读 · 0 评论 -
vue element UI el-dialog 如何监听右上角 x 关闭按钮
<el-dialog :before-close="handleDialogClose"></el-dialog>methods: { /** * 点击 X 关闭对话框的回调 **/ handleDialogClose() { }}原创 2018-10-24 17:50:38 · 30672 阅读 · 6 评论 -
vue 前端中如何改变图标大小
<i style="font-size: 15px;" class='el-icon-check color-green'></i>说明: class='el-icon-check color-green' : 指定图标 font-size: 15px; : 图标大小 font-weight: bold...原创 2018-10-24 17:46:26 · 31399 阅读 · 1 评论 -
vue element UI el-table表格添加行点击事件
<el-table @row-click="openDetails"></el-table>//对应的 methods 中//点击行事件methods: { openDetails (row) { //具体操作 },}原创 2018-10-24 17:41:59 · 48877 阅读 · 0 评论 -
vue element UI el-table表格调整行高,及单元格内字体大小
vue element UI el-table表格调整行高,及单元格内字体大小说明: 缩小:行高到一定程度之后便不能缩小。 好像最小35px。各位可以试一下。 升高:本人实际开发中没试过最大多少,但行高的高度完全可以调到自己适合的高度。 <el-table :row-style="{height:'20px'}" :cell-style="{...原创 2018-10-24 17:38:34 · 80573 阅读 · 15 评论 -
vue 通过动态绑定class,改变样式
根据输入框或者下拉选择框有没有值,改变按钮可不可用,及按钮颜色<el-select v-model="selectData.id" placeholder="请选择"> <el-option label="请选择" value=""></el-option> <el-option原创 2018-10-25 10:02:48 · 9943 阅读 · 0 评论 -
vue 计算属性传参,并返回处理结果
<el-table :data="tableData"> <el-table-column label="备注" width="210" align="center"> <template slot-scope="scope"> <span>{{changeRemark原创 2018-10-25 09:51:05 · 12828 阅读 · 7 评论 -
一次性查出所有数据,前端根据输入框、选择框、多选框等等条件过滤数据
<script> data () { return { allData:[], //一次性查出的所有数据 searchData:[], //前端过滤后的数据 searchCondition:{ name: '', age: '', birthday: '' } ...原创 2018-10-25 09:39:18 · 1587 阅读 · 0 评论 -
vue v-for循环得到下标
<template v-for="(item,index) in data"> ........</template>index就是下标 结语:本人所有文章都立志写的简单易懂,戳中问题点。 当然了,简单的同时可能忽略了很多细节与详细,如有不足的地方,还请谅解并指出。 如对文章或实现技术上有问题,可联系我:qq: 1226500260 ...原创 2018-10-08 18:01:45 · 5002 阅读 · 3 评论 -
vue element UI el-table 给表格添加复选框,并得到所选值
<el-table @selection-change="changeFun"> <el-table-column type="selection"> </el-table-column></el-table><script> data () { return {原创 2018-10-24 17:57:23 · 35968 阅读 · 3 评论 -
vue element UI el-select选择框触发事件(每选择一次则触发一次该事件)
<el-select v-model="selectData.id" @change="selectTrigger(selectData.id)"> <el-option label="请选择" value=""></el-option> <el-option v-for="ite原创 2018-10-24 18:04:17 · 82089 阅读 · 5 评论 -
[Vue warn]: Invalid prop: type check failed for prop "action". Expected String with value "undefined
说action期待值是string,可是我连action属性都没找到看了半天发现:使用el-upload 组件做文件上传时,写了自定义方法,但是el-upload的action属性还是要写上。随便写个值都可以如: action="aaa"...原创 2019-07-13 13:22:12 · 10220 阅读 · 6 评论 -
vue 前端传图片文件,后端接收
vue端1、在 main.js 文件中添加const upload = axios.create({ //这里配置你自己的url baseURL: 'http://localhost:8096/reconciliation/', timeout: 50000,});Vue.prototype.$upload = upload;2、在需要上传文件的vue文件中up...原创 2019-05-06 16:31:02 · 12814 阅读 · 1 评论 -
前端报错:net::ERR_CONNECTION_REFUSED
场景:在自己电脑浏览器访问别人运行的项目,前端是vue,后台使用java写的问题:其实就是网络异常解决:通过检查发现,前端只是把http://localhost:8080改成了http://192.168.**.**:8080 没有修改访问后台的接口地址在,把访问后台的地址,localhost改成对应的本机ip就行了...原创 2019-03-11 11:34:30 · 162186 阅读 · 8 评论 -
element Table 表格给列添加排序符号, 并把排序规则传给后台
先看写法:蓝色部分 <el-table @sort-change="getSortChange" :default-sort = "{prop: 'start_time', order: 'desc'}" > <el-table-column prop="start_time" label="开始时间" sortab...原创 2019-01-29 11:31:02 · 5418 阅读 · 0 评论 -
vue 父组件向子组件传值
先看代码:1、父组件:<template> <div> <div v-if="!userShow"> 父组件内容区 <el-button @click="lookUserInfo(scope.row)">&nbsp;查看</el-button> </div>原创 2018-11-13 14:29:33 · 302 阅读 · 0 评论 -
vue 父组件调用子组件的方法,子组件调用父组件方法
首先看代码:1、父组件:<template> <div> <div v-if="!userShow"> 父组件内容区 <el-button @click="lookUserInfo(scope.row)">&nbsp;查看</el-button> </div&原创 2018-11-13 14:12:11 · 11931 阅读 · 1 评论 -
vue 从页面中按钮事件跳转菜单中的页面,【父组件到子组件】【跳转新的页面】
说明: 在用vue做项目时,有事需要跳转新的页面,有时候也需要复用已经写好的页面。 实际项目开发中: 在vue后台管理系统中,操作数据都要有一个记录。这些记录在任务管理界面可以查看,当在任务管理见面点击查看任务详情的时候,需要还原到当时操作数据时的情景,但是只需要显示数据展示的table。一切相关操作,比如搜索栏,删除数据,修改数据,添加数据等等都...原创 2018-11-13 13:35:14 · 10220 阅读 · 0 评论