element-ui的el-table更改筛选值filtered-value后不起作用

最开始filtered-value设置一个筛选数组。可以正确筛选出需要的内容。但是通过js动态改变筛选数组后,筛选出来的数据还是首次的筛选数组的内容。没有进行动态更新。
如图,我的第一列的topic_name是通过filter_value这个数组进行筛选的。
element-ui的el-table更改筛选值filtered-value后不起作用_第1张图片

按照一般的思维,当我在js里赋值 this.filter_value = [‘111’, ‘222’] 之后,table表格应该只加载出topic_name=‘111’和topic_name=‘222’的行信息。但是实现出来的效果并不是想象中的这样,新设置的filter_value 并没有起作用。

关于如何让更改后的数组起到筛选作用,现记录如下:
首先需要给table绑定一个ref属性,如图:
element-ui的el-table更改筛选值filtered-value后不起作用_第2张图片

然后在js部分通过ref获取该table,接着对需要筛选的列进行重新加载,也就是这个时候重新定义需要筛选的数组。 具体代码如下:

        this.$nextTick(() => {
          const refs = this.$refs.topic_table
          var column = refs.columns[0]		// 自己table里需要进行筛选的列。我的是第一列,所以下标为0
          column.filteredValue = ['111', '222']	// 重新定义需要筛选的数组
          refs.store.commit('filterChange', {	// 重新加载该列
            column,
            values: column.filteredValue,
            silent: true
          })
        })

我在外围用了 this.$nextTick(() => { })函数,意思就是让页面的组件都加载完,以防止无法通过$refs获取到table。
注意代码里var column的时候,对应自己table里需要进行筛选的列。 这里需要根据自己的表格情况进行修改。

然后就可以实现动态修改筛选值的效果啦!

你可能感兴趣的:(前端,javascript,开发语言)