vue+elementUI+jsx 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. 重启本地环境

 <el-table>
<el-table-column label="这是文字" prop="title" :render-header="renderHeader"></el-table-column>
</el-table>
data(){
return{
visibled:false
option:[],
categoryArr:[]
}
},
methods:{
renderHeader(h){
return(
<div><el-cascader option={this.option} v-model="categoryArr" value={this.categoryArr} props={{value:'id'}} on-change={this.changeCategoryArr} show-all-levels={false} change-on-select on-blur={this.showPopoverFn} expand-trigger="hover" class={{cascaderStyle:true}}></el-cascader></div>)}},
showPopoverFn(){
this.visible = false}

思路：

1. 级联选择器，会改变框中的值，需求上面表头的文字不允许修改，所以需要使用一个元素用文字来盖住级联选择器框中的值，把级联选择器中的label设为width：0em ,用一个伪类content:'这是文字' 来盖住级联选择器的输入框

2. 主要是调整样式，其他也没什么疑难点