vue+elementUI+jsx table自定义表头筛选模板

需求：element UI table表头筛选弹出框+级联选择器筛选

需求效果图

准备工作：

1. npm i babel-plugin-jsx-v-model -D (yarn add babel-plugin-jsx-v-model -D )

2.  .babelrc: (找到项目目录下的这个文件)

{ "presets": ["es2015"], "plugins": ["jsx-v-model", "transform-vue-jsx"] }

3. 重启本地环境

data(){retrun{

options :[],

categoryArr  :[],

visible :false
}}

methods:{

renderHeader(h, { column, $index }, index) {

return ( v-model={this.visible}>

prop={{value:'id'}}  on-change={this.changeCategoryArr} show-all-levels={false} change-on-select clearable on-blur={this.showPopoverFn} expand-trigger="hover">

slot="reference">问题分类

)

},

// 失去焦点

//  1. 获取了对应的数据，弹出框不消失

showPopoverFn() { this.visible = false },

遇到的问题

1. 获取了对应的数据，弹出框不消失

2. jsx 不支持v-model 语法，需要装“babel-plugin-jsx-v-model” 这个插件，然后进行相应的配置 

备注： 勾选的值，不会改变表头。