运营智享遇到的问题(前端)
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