前端图片加载失败显示默认图片,onerror不生效,onerror用法 前端图片加载失败显示默认图片HTML部分,给img标签添加属性onerror绑定下面的imgOnerror方法<img :onerror="imgOnerror" :src="imageURL"/>以下是vue3写法,先导入图片,再复制,直接给img.src赋值图片路径,可能会导致图片路径识别失败,onerror属性不生效主要还是看路径是否正确// 第一步导入默认图片const IMGSRC = require('../../assets/images/empty.png')con
el-form表单校验 动态添加el-form-item rules用法,嵌套表单校验 el-form表单校验 动态添加el-form-item rules用法,嵌套表单校验el-form中rules绑定的规则,只争对model绑定对象中的一级元素(如homeworkName)起作用,且定义rules规则的时候,名称要与绑定的对象的属性(prop中绑定的)名称一致对于个别el-form-item中的元素含有多层且套的情况,可以给el-form-item中绑定属于自己的规则,需要注意给prop绑定时的名称要保持一致(一级属性+索引+二级属性名称 :prop="‘list.’+index+
解决vue导航守卫beforeRouteLeave浏览器返回时,页面闪烁 解决vue导航守卫beforeRouteLeave浏览器返回时,页面闪烁页面闪烁问题,加上延时可解决beforeRouteLeave(to, from, next) { if (!this.canReturn) { // 业务判断,无需关注 setTimeout(() => { this.$confirm('离开内容将被清空, 请确认离开?', '提示', { confirmButtonText: '确定', cancel
使用el-checkbox-group时,el-checkbox后面的文本或者div不显示 使用el-checkbox-group时,el-checkbox后面的文本或者div不显示起初setScore类所在的div死活不显示,各种添加样式都不生效,强制渲染也没用,最后发现是font-size等于0,添加样式后ok了<el-form-item prop="titleType" style="float:right;"> <el-checkbox-group v-model="query.titleType" @change="changeBox"> <
react组件的生命周期,钩子函数的使用,生命周期,钩子函数执行顺序 react组件的生命周期,钩子函数,执行顺序react生命周期分为三个阶段阶段一:组件创建时#mermaid-svg-DAjs6kjk0z62mU8x .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-DAjs6kjk0z62mU8x .label text{fill:#333}#mermaid-svg-DA
react父子组件传值 react父子组件传值react父子组件传值一、父给子传值1.子组件是函数组件时,通过参数props接收2.子组件是类组件时,通过参数this.props接收二、子给父传值react父子组件传值一、父给子传值1.子组件是函数组件时,通过参数props接收2.子组件是类组件时,通过参数this.props接收二、子给父传值1.由父组件给子组件提供一个回调函数,传递给子组件;2.当子组件给父组件传值时,调用该回调函数3.父组件通过回调函数调用,拿到子组件传来的参数结果:点击按钮后
复选框 el-checkbox选不上 复选框 el-checkbox选不上<el-form v-for="(item,index) in list" :key="index"> <el-form-item> <el-checkbox-group v-model="item.myArr"> <el-checkbox v-for="(ele,index) in item.checkBoxList" :key="ele.id" :label="ele.label">{{e
el-table实现动态列,列数根据接口返回 vue,element-ui中el-table实现动态列,列数根据接口返回solt="header"是为了插入表头的,这里遍历listStudent[0],是因为表头都一样,所以取第一行数据的字段做为表头即可<template> <div> <el-table :data="listStudent"> <el-table-column label="id" prop="id"></el-table-column>
解决ie浏览器get请求自动请求来自缓存的问题 解决ie浏览器axios发起get请求自动请求来自缓存的问题如果是单个get请求,直接拼接随机码参数或者时间戳function getShopList(params) { return service({ url: '/shoppingCart/getByUserId?t=' + new Date().getTime(), method: 'get', params: params })}如果是全部都加,则可以在axios请求拦截器中中配置service.in
element-ui表格数量为空时,给表格中插入图片或其他元素样式 element-ui表格数量为空时,给表格中插入图片或其他元素样式通过插槽可以实现使用案例通过插槽可以实现<template slot="empty"> <div style="margin-top: 35px"> <img src="/static/images/cart-empty.png" /> </div> </template>使用案例<el-table :data="shoppDat
dialog弹出,点确定,页面隐藏滚动条,导致页面和message弹框抖动 dialog弹出,点确定,页面隐藏滚动条,导致页面和message弹框抖动解决办法:在main.js中导入element时添加配置:import ElementUI from 'element-ui'// 防止dialog导致页面滚动条消失抖动ElementUI.Dialog.props.lockScroll.default = false;如果仍然不起作用在body中添加/* 解决页面dialog出现时,页面滚动条出现消失导致的Message消息提示抖动问题 */body {
保留文本框的输入空格和换行,并且可以自动换行 场景:直接使用<pre>标签不能自动换行<divclass="reply-content">{{item.content}}</div>.reply-content{width:100%;white-space:pre-wrap;*white-space:pre;*word-wrap:break-word;}
如何在浏览器中记住页面滚动的位置 如何在浏览器中记住页面滚动的位置场景:在滚动A页面的时候,然后再去B页面,这时返回A页面,会发现A页面的位置滚动了和B页面一样高的距离,不能记住历史位置。原因:在滚动时滚动的是整个body页面,而不是单独的A或B页面。如何检查滚动的是否那个元素?将如下代码粘贴到控制台,然后滚动页面,打印结果即滚动的元素。function findscroller(element) { element.onscroll = function() { console.log(element); };
axios与axios.create()的区别 参考原文:https://www.cnblogs.com/fsg6/p/13204365.htmlaxios.create()是添加了自定义配置的新的axios例如:用axios发送请求:axios({ method:'POST', url:'http://localhost:8000/login', data})用axios.create()创建一个新的axios发请求:cosnt requset = axios.create({ //基础路径 baseURL='http:
在mounted获取不到data中的值,其中data的值是由在created中请求并初始化的。 在mounted获取不到data中的值,其中data的值是由在created中请求并初始化的。今天发现,在created中发起ajax请求,并给data中的值进行了初始化,随后想要在mounted使用初始化后的值,结果却怎么也获取不到,打印的结果如下:js代码是这样的export default { created() { this.getData(); }, data() { return { reportData: {} }; }, met
Vue时间过滤器的使用 Vue时间过滤器的使用在main.js中定义// 定义时间过滤器,Vue.filter('dateFormat', function (originDate, pattern = '') { // 根据给定的时间字符串,得到特定的时间 var dt = new Date(originDate) // yyyy-mm-dd var y = dt.getFullYear() var m = (dt.getMonth() + 1).toString().padStart(2, '0'
在表单验证当中,this.$refs.form.validate方法不执行 在表单验证当中,this.$refs.form.validate方法不执行 addUser() { console.log(12); // 可以执行 this.$refs.addFormRef.validate((valid) => { console.log(valid); // 不执行 }); }注:html代码如下<el-dialog title="添加用户" :visible.sync="addDialogVisible" wi