element table自定义template slot=“header“,数据无法更新的问题

写了个批量操作的组件,要放到header里,代码如下:

      操作
      
      
            批量操作
      

看起来没有什么问题,然而使用时发现countryCode无法响应,无论params.countryCode怎么变priorityBatch接收到的都是初始值。
于是我去对比了官方文档

    

发现官方文档上是slot="header" slot-scope="scope",于是我把slot-scope加上了,结果报了引用但未使用的错误,到此时并没有任何进展,因此我去看了vue slot文档,发现具名插槽和作用域插槽是有区别的:

  1. slot=“header” : 表示是具名插槽,它占了这里的位置,this 指向 data,但是 data 更新的时候,占位这个操作并不会再次重新占位,里面的数据并不会随着 data 更新。
  2. slot-scope=“scope” 表示是作用域插槽,在这个作用域内, this 指向 scope。
  3. slot=“header” slot-scope=“scope” :{{params.countryCode}} 指向 data 里的数据,所以会随着data更新。
    但是由于prettier的格式化要求,如果引用了slot-scope="scope" ,template里并没有用到scope而报错,而具名插槽slot简写可以解决这个问题,把slot="header" 改成#header 。
    修改后的代码如下:
      操作
      
      
            批量操作
      

你可能感兴趣的:(element table自定义template slot=“header“,数据无法更新的问题)