使用element-ui时遇到的table自定义表头数据不能改变的问题

el-table使用自定义表头时

?

1 2 3 4 5 6 7 8 9 10 11 12

<el-table-column width="auto">   <template slot="header">     <el-select v-model="tableSelect" placeholder="请选择" size="mini">       <el-option         v-for="item in options"         :key="item.value"         :label="item.label"         :value="item.value"          />     </el-select>   </template> </el-table-column>

select选择之后，tableSelect的值变了，但是没有体现在表头上。

查询之后发现是作用域的问题。请记住：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

<template slot="header" slot-scope="scope">（scope可能因为eslint报错，定义了但没使用），或者<template #header>(#是v-slot的缩写，#header=> v-slot:header)

添加slot-scope="scope"传递数据（此插槽为作用域插槽）。

一般来说，不传值的话插槽中无法使用父组件的数据。这里也是因为这个原因导致select没有作用。

至于为什么加上slot-scope="scope"就可以了，应该和element-ui源码有关。（等待查看）