解决elementUi中的table组件筛选表格默认筛选filtered-value没效果,表格数据渲染不出来的问题

项目中遇到一个问题想要的效果如下:

但是实际进入该页面的时候必须刷新一下才会显示默认筛选的效果和数据,遇到的问题如下:

数据请求没有问题,但是tabledata总是加载不出来

问题代码如下:

          <el-table-column
            column-key="name"
            prop="name"
            :label="filterLabel"
            width="200"
            :filters="[{ text: $route.query.name, value:$route.query.name}]"
            :filter-method="filterTag"
             filter-placement="bottom"
            :filtered-value="[$route.query.name]"
            :filter-multiple = false
            >
          </el-table-column>

可以看到:我是直接给filtered-value赋值一个数组,将路由传递过来的query放在里面

解决办法:利用this.$set给filtered-value赋值,本质原因要参考我的另一篇文章  解决vue通过索引值修改数组中的元素页面不改变的问题  ,直接给fltered-value的数组赋值,相当于通过索引0赋值:this.letters[0]='b'  所以view层是不会发生变化的。

 //html
<el-table-column
     :filtered-value="filtereds">
 </el-table-column>

//js
 mounted() {
      this.$set(this.filtereds,0,this.$route.query.name)
    }

至此,问题解决。

猜你喜欢

转载自blog.csdn.net/a1059526327/article/details/111034964