vue + vue-resource + element-ui项目中遇到的问题总结

最新推荐文章于 2023-12-04 12:06:48 发布

原创

最新推荐文章于 2023-12-04 12:06:48 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-resource #element-ui #ie9 #问题总结

本文总结了在使用vue + vue-resource + element-ui构建的项目中遇到的问题，包括el-table过滤、ie9兼容性、pagination、vue检测变化、el-dialog居中、input背景颜色等问题，并提供了详细的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运营智享遇到的问题(前端)
vue + vue-resource + element-ui + vue-router + node.js + sass

1. el-table filter tag 使用filter-method处理数据过滤,当该标签下没有数据时标签切换不起作用
解决: 1.用el-table的filter-change方法处理过滤逻辑,而不用el-table-column的filter-method方法;
2.filter tag 设置默认值
初始化table时, filter-change和filter-method方法都不会调用,所以初始值设置只是改变tag的UI状态,获取不到当前选择的tag值,
自己设置一个变量tagValue接收tag值,初始化时默认赋值,在将显示的label值相应formatter回显,filter-change时赋值相应的tagValue.
:filter-value="filterValue" //tag选中状态
<el-table :data="list" @filter-change="filterChange">
<el-table-column
prop="tag"
:label="tagNameFormatter"
column-key="instiStatue"
:filter-multiple="false"
:filters="instiStatusList"
:filter-method="filterTag"
:filtered-value="filteredValue"
:formatter="statusFormatter"
filter-placement="bottom">
</el-table-column>
</el-table>
tagNameFormatter(){//标签名格式化
let label = '';
for(let i = 0 ; i < this.instiStatusList.length; i++){
if(this.tagValue == this.instiStatusList[i].value){
label = this.instiStatusList[i].text;
}
}
return label;
}
filterChange(filter){//过滤(tag值改变) el-table方法
this.filteredValue = [];
this.filteredValue.push(filter.instiStatus[0]);
this.tagValue = filter.instiStatus[0];
this.getList();//查询列表数据
}
filterTag(value, row){//过滤(tag值改变) el-table-column方法
}
statusFormatter(row, column){//状态格式化
let label = '';
for(let i = 0 ; i < this.instiStatusL