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

el-table使用自定义表头时

<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源码有关。（等待查看）