自定义el-table表头

Vue组件：el-table-column的动态表头渲染问题

原创于 2023-05-15 17:41:04 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

文章讨论了在Vue.js中使用el-table-column组件时，通过#header和slot=header两种方式实现表头动态显示的情况。尽管两者都能根据distributedAmount的变化更新内容，但似乎slot=header方式在动态渲染上存在不完全生效的问题。

  <el-table-column label="***" align="center" prop="inStockAmount">
      <template #header>***(合计：{{ distributedAmount }})</template>
  </el-table-column>

 <el-table-column label="***" align="center" prop="inStockAmount">
      <template slot='header'>***(合计：{{ distributedAmount }})</template>
  </el-table-column>

以上两种方法都是可以的 #header可以动态显示表头，就比如distributedAmount 变了就会重新渲染，但是slot='header'不行