el-table-column下自定义header使用el-select v-model绑定值不更新

el-table-column下自定义header使用el-select v-model绑定值不更新

问题描述

例如：element-table中表格表头想增加筛选下拉框使用el-select选择不同的状态，就要自定义表头，切换select值不能实时更新绑定的model数据

<el-table-column min-width="100" align="center" label="项目组">
                <template slot="header">
                    <el-select v-model="groupName" @change="changeGroupType">
                        <el-option
                            v-for="item in groupList"
                            :key="item"
                            :label="item"
                            :value="item"
                        ></el-option>
                    </el-select>
                </template>
                <template>{{ groupName }}</template>
            </el-table-column>

changeGroupType事件被触发，打印groupName值也改变了，但是页面ui并没有变化

---

解决方案：

把 slot=“header” 改为 #header