一、element的输入框禁止输入空格
/* 添加.trim*/
v-model.trim="row.standardFiled.name"
二、在ElementUI中原生方法添加参数
:on-change="(file,fileList)=>handleChange(file,fileList,item.key)"
三、修改表格hover样式
- 1.表格中使用了fixed
.el-table__body .el-table__row.hover-row td {
background: #F3F2FF!important;
}
- 2.表格中没用fixed
.el-table tbody tr:hover>td{
background: #F3F2FF!important;
}
四、vue+element-ui项目的分页问题
问题造成原因
我们返回当前页面取得总条数total的之前，element-ui的分页组件已经在页面加载完毕，当时的total绑定的是data里面初始化的数据0，所以当总条数为0的时候，分页组件的页码默认为1。并且当total在created生命周期里取得数据后，分页组件也不会刷新。所以这就导致， 页面内容正确，但是页码高亮依旧是第一页
解决办法
我们需要在created之后刷新这个分页组件或者让分页组件的html后于created之后加载到页面。
再次刷新这个分页组件是不现实的，我们选择在created之后加载分页组件。具体办法就是使用v-if。在total不为data里面给的初始值0的时候，才让这段html加载到页面。
<el-pagination
v-if="total!=0"
@current-change="handleCurrentChange"
:current-page.sync="searchParam.pageNo"
:page-size="searchParam.pageSize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
五、element上传文件表单验证
- 表单中添加prop属性 prop="path"
<el-form-item label="上传标准文件：" prop="path">
<el-upload
class="upload-demo"
ref="upload"
v-model="ruleForm.path"
action="uploadFile"
:http-request="httpRequest"
:show-file-list="false"
>
<el-button slot="trigger" size="small" type="warning" icon="el-icon-upload2">点击上传</el-button>
<div slot="tip" class="el-upload-list__item-name" v-if="fileName"><i class="el-icon-document"></i>
{{fileName}}</div>
</el-upload>
</el-form-item>
- 2.rule中添加校验以及自定义验证规则
path:[
{ validator: validatePath, trigger: 'change' }
],
var validatePath = (rule, value, callback) => {
if (!this.ruleForm.path) {
callback(new Error('请上传标准文件'));
} else {
callback();
}
};
- 3.文件上传成功后调用表单校验方法
this.$refs.ruleForm.validate('path')
六、confirm弹框 callback
this.$confirm('确认删除？', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
callback: action => {
if (action === "confirm") {
this.$message({
type: 'success',
message: '删除成功!'
});
} else {
this.$message({
type: 'info',
message: '已取消操作！'
});
}
})
七、使用el-cascader的lazyLoad方法时，注意this的作用域
问题描述
使用 element 的 el-cascader 实现懒加载的级联菜单，显示this指向的内容undefined，应该是this指向的作用域问题。
image.png
解决方式
lazyLoad 的函数用ES6的语法写
image.png
代码参考
lazyLoad: ((node, resolve)=> {
if (node.level === 0) {
getModelTreeByType({dataType:this.dataType}).then((result)=>{
if(result.data.code === 1){
var responeData = result.data.data;
return resolve(responeData);
}
}).catch((error)=>{
})
}else if (node.level > 0){
getModelTreeByType({parentId:node.data.nodeId,dataType:this.dataType}).then((result)=>{
if(result.data.code === 1){
var responeData = result.data.data;
if(responeData[0].type == 'TABLE'){
for(var i=0;i<responeData.length;i++){
responeData[i].leaf = true
}
}
return resolve(responeData);
}
}).catch((error)=>{
})
}
return resolve([]);
})
八、el-popper，el-tooltip__popper 样式修改
[图片上传中...(image.png-d13899-1651830501752-0)]
-
el-popover
image.png
-
.el-popover{
color: #3F4E75!important;
}
/*剪头颜色*/
.el-popper[x-placement^="bottom"] .popper__arrow:after{
border-bottom-color: #000 !important;
}
.el-popper[x-placement^="top"] .popper__arrow:after{
border-top-color: #000 !important;
}
.el-popper[x-placement^="bottom"] .popper__arrow{
border-bottom-color: #000 !important;
}
.el-popper[x-placement^="top"] .popper__arrow{
border-top-color: #000 !important;
}
-
el-tooltip__popper
image.png
-
.el-tooltip__popper {
background: #FFF !important;/*背景色 !important优先级*/
border-color: #EBEEF5 !important;
opacity: 1 !important;/*背景色透明度*/
color: #3F4E75 !important;/*字体颜色*/
font-size: 14px;
-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0 ,0.1);
box-shadow: 0 2px 12px 0 rgba(0,0,0 ,0.1);
}
/*剪头颜色*/
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after{
border-bottom-color: #FFF !important;
}
.el-tooltip__popper[x-placement^="top"] .popper__arrow:after{
border-top-color: #FFF !important;
}
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow{
border-bottom-color: #FFF !important;
}
.el-tooltip__popper[x-placement^="top"] .popper__arrow{
border-top-color: #FFF !important;
}
