发布时间: 2021-05-31 06:40:00
<el-table border stripe show-header
style="width: 100%"
ref="consumption_table"
@selection-change="handleSelectionChangeForConsumptionTable"
:data="consumptions_table_data.filter(data => !filter_for_consumptions
|| data.source.toLowerCase().includes(filter_for_consumptions.toLowerCase())
|| data.data_type.toLowerCase().includes(filter_for_consumptions.toLowerCase())
|| data.product_name.toLowerCase().includes(filter_for_consumptions.toLowerCase())
)
"
>
以上代码，会导致 selection-change 事件 瞬间运行两次，一次是正确的，一次是错误的（返回空）
导致 多选框无法使用。
增加 row-key 也不行（参考这个文章：https://blog.csdn.net/Amnesiac666/article/details/111556517）
解决办法：
不再使用 data 中的filter方法，直接在sql中查询对应的内容。
例如：
db.get("select * from materials where id = ? ", [that.material_id], function(error, row){
let current_material_name = row.name
that.material = row
db.serialize(function(){
let sql = `select *,
consumptions.id as the_id
from consumptions
join materials on consumptions.material_id = materials.id
join algorithms on consumptions.algorithm_id = algorithms.id
where materials.name = ? and year >= ? and year <= ?
and algorithms.english_name= ?
`
if(that.filter_for_consumptions !== ''){
sql += ` and (source like '%${that.filter_for_consumptions}%'
or data_type like '%${that.filter_for_consumptions}%'
or product_name '%${that.filter_for_consumptions}%'
) `
}
sql += ` order by year asc`
db.all(sql,
[current_material_name, that.from, that.to, that.calculator_name], function(error, rows){
console.info("== rows: " , rows)
console.info("== error: " , error)
that.consumptions_table_data = rows
})
})
db.close()
})
...
watch: {
filter_for_consumptions() {
this.get_consumptions_table_data()
},
}
Back