vuejs - 貌似 el-table data中的内容不能使用

           <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()
      },

}