1、给element的input添加点击事件无效，代码如下：
<el-input type="textarea" readonly @click="openRole()" placeholder="请输入内容" v-model="name" > </el-input>
修改为@click.native即可；
<el-input type="textarea" readonly @click.native="openRole()" placeholder="请输入内容" v-model="name" > </el-input>
2、element的dialog里面嵌套dialog,第二层会被遮盖
解决办法：给dialog添加属性“:append-to-body=true”,再修改一下样式即可
3、vue-router路由无法跳转，且路径总有“ # ”
解决办法：添加mode:' history '，既可以去掉#，也能实现路由的跳转，如下图所示
代码截图
4、echart图表的div宽高设置为100%，渲染的实际宽高变成100px;
解决办法：在mounted()中添加如下代码
let chart = document.getElementById(('myChart'));
chart.style.width = window.innerWidth - 560 + 'px';//数字根据自身进行调整
chart.style.height = window.innerHeight - 140 + 'px';
this.myChart = this.$echarts.init(chart);
let that = this;
window.addEventListener("resize", function () {
let chart = document.getElementById(('myChart'));
chart.style.width = window.innerWidth - 560 + 'px';
chart.style.height = window.innerHeight - 140 + 'px';
that.myChart.resize();
});
5、echart饼图无法展示数据，如下图
效果图
解决办法：在option.series每条数据添加label:
label : { normal : { formatter: '{b}{c} ({d}%)', textStyle : { fontWeight : 'normal', fontSize : 15 } } },
注：option.series每条数据加radius : '80%', center: ['50%', '50%'],可调整饼图大小和圆心位置
6、设置div宽高= 屏幕可见的宽高 - 指定宽高（注意空格）
width: calc(100vw - 540px); height: calc(100vh - 140px);
7、vue+element中validate方法不执行也不报错
症结：自定义校验中需每一个判断都有callback()
问题描述：写了一个自定义校验金额的规则，代码如下（第一次未加else）：
else中的代码添加后便可以执行方法
但是点击保存按钮时，未弹出“保存成功”的提示，代码如下
8、element的el-table表头和表格有错位，解决办法在th中添加如下样式
display: table-cell!important;
9、a=[1,2,3],b.a=a;a[0]=0;b.b=a;此时发现b中的a也变成了[0,1,2],
症结：js对象的深复制和浅复制
解决办法：a=[1,2,3],b.a=JSON.parse(JSON.stringify(a);
a[0]=0;b.b=JSON.parse(JSON.stringify(a))
解析：深复制：b复制了a,a改变了，b没变; 实现方式{
(1)b= JSON.parse(JSON.stringify(a)) (2)递归复制所有属性（3）jquery的$.extend方法 }
浅复制：b复制了a,a改变了，b也变了; 实现b=a
10、element 悬浮框样式修改
问题描述：使用el-select ,下拉框样式需要进行修改，但是不能影响其他页面的下拉框样式。
症结：scoped让样式只在当前页作用，但是element自带的样式无法与scoped兼容
解决办法：el-select有属性popper-class（给下拉框设置class）,然后以这个class来设置样式，不能使用scoped,否则无法生效
样式代码
11、axios请求同步
问题描述：表头和表数据是两个独立接口，页面表头 渲染出来，表数据无法渲染，但是有对应条数的方格。
症结：axios是异步请求，数据请求有时间差
解决办法：修改axios请求，将两个接口同步请求，然后再进行处理
axios.all([请求1,请求2]).then(axios.spread(function(res1,res2){
//res1是请求1的返回结果，res2是请求2的返回结果
}))
12、vue+xlsx实现前端下载功能，但导出重复的表格数据
症结：el-table用fixed属性使表格的某列固定不动，element实现固定列的原理是：创建两个table的dom元素，通过一个显示、一个隐藏来实现交互效果。这也导致导出时会将两个table都 导出，导致数据重复
解决办法：下载时先移除有fixed的table元素，然后在append回去。这样既能实现导出单份数据，也能保留固定列的功能。具体解决办法如下图：
解决代码
13、前端调用后台地址实现下载功能，ie下报错 原因是路径有中文，需要手动转义
原代码：window.location.href=baseUrl+'?name=张三&age=14'
正确代码：window.location.href=encodeURI(baseUrl+'?name=张三&age=14')
14、多级表头，表头是循环生成，但是样式错乱。
原本两个子类的一级表头只有一个子类，还有其他的一级表头无法显示。
原因在于循环时必须绑定的key值，循环生成，每次使用的都是下标，导致key值会有重复。将key值 设置为唯一标识的字段即可解决问题
15、子组件强制刷新页面，加载mounted方法：
描述：父组件给子组件传值，若第二次和第一次传的值一样，watch无法监控，导致数据没变化，因此需要强制刷新子组件，让其执行mounted函数
解决办法：在父组件中，子组件绑定不同的key,便可实现强制刷新
<child :key='key'></child>
data() { return { key:0}},
function xx(){this.key++;}
16、element的下拉框添加多选，报错：Error in event handler for "handleOptionClick": "TypeError: value.push is not a function
症结：多选框绑定的参数应该是个数组，而非字符串
select
form:{ cityName:[]// cityName:""就会报以上错误，切记 }
补充：若提交给后台的是字符串，可在提交前cityName.toString()将其转换成字符串。
网友评论