闲暇时间记录一下项目中用到的框架以及遇到的问题
el-select点击下拉框不能影响视图问题
- 在@change触发的方法下放入this.$forceUpdate()即可解决该问题
1
this.$forceUpdate()
vue的element-ui中form清除验证找不到clearValidate、resetFields
- 在做表格增删改查中时常要在弹窗上用到form表单验证，第一次点击报错undefined
- 问题出现在刷新界面后第一次新增，此时表单内的dom还没有加载完成就执行了clearValidate导致报错
- 解决办法this.$nextTick 但是this.$nextTick会造成新增或者编辑的时候做的参数处理出现问题、新增不会清空表单，编辑的值一直是第一次选中行的数据
- 放到this.$nextTick内部问题解决
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18addDialog(){
this.fromType = 'add';
this.dialogTit = '新增';
//清空表单
for (let x in this.form) {
if(x =='parentIds'){
this.form[x] = []
}else{
this.form[x] = ''
}
};
this.$nextTick(()=>{
//清除验证规则
this.$refs.form.clearValidate();
})
//显示弹框
this.dialogFormVisible = true;
}, - 这种操作会影响编辑的时候数据不能动态渲染 将赋值操作都放到this.$nextTick中处理即可
elementui中flex布局下table宽度自适应的问题（flex布局的问题基本上都是这么解决）
- 文章地址https://blog.csdn.net/qq_19694913/article/details/81144314
- BUG：在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据，在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小。
- Debug：通过控制台发现组件生成的table的宽度是动态计算的，翻查源码，发现以下代码段
- 解决方案：可以将设置了flex属性的容器设置position:relative，然后在子元素加多一层div包裹内容，设置position:absolute; width:100%;继承父级宽度，那么内容也会继承该div的宽度了。
elementui中验证规则
- elementui中验证规则prop中声明的字段要和v-model绑定的地段相同（prop=’projectName’,v-model=’addForm.projectName’）;
- prop=’projectName’中的projectName字段必须在data数据中有
1
2
3
4
5
6
7
8
9
10
11
12data(){
return{
addForm:{
projectName:''//验证必须要有验证的字段
},
rules:{
projectName:[
{//验证规则}
]
}
}
}el-select下拉框复选内容撑不起外边的输入框
- el-input__inner不要设置高度即可
element-ui table底行合计
- 如果是在template中自定义的话 需要有prop属性
1
2
3
4
5<el-table-column width="80" prop="yearQuantities" label="工程量" align="center">
<template scope="scope">
<span>{{scope.row.yearQuantities}}</span>
</template>
</el-table-column>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
//property这个就是prop的字段 否则undefined
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
if (index === 0) {
sums[index] = '总价';
return;
}
//自定义算出第6列的值
if (index === 6) {
sums[6] = (sums[5]/sums[2]*100).toFixed(2);
return;
}
});
return sums;
}
}
