需求: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. 重启本地环境
<el-table>
<el-table-column label="这是文字" :render-header="renderHeader" prop="name"></el-table-column>
</el-table>data(){retrun{
options :[],
categoryArr :[],
visible :false
}}methods:{
renderHeader(h, { column, $index }, index) {
return ( <el-popover placement="bottom" width="200" height="300" trigger="manual" v-model={this.visible}>
<el-cascader option={this.options} v-model={this.categoryArr} value={this. categoryArr } prop={{value:'id'}} on-change={this.changeCategoryArr} show-all-levels={false} change-on-select clearable on-blur={this.showPopoverFn} expand-trigger="hover"></el-popover
<p slot="reference">问题分类<i class=" el-icon-arrow-down"></i></p>)
},
// 失去焦点
// 1. 获取了对应的数据,弹出框不消失
showPopoverFn() { this.visible = false },
遇到的问题
1. 获取了对应的数据,弹出框不消失
2. jsx 不支持v-model 语法,需要装“babel-plugin-jsx-v-model” 这个插件,然后进行相应的配置
备注: 勾选的值,不会改变表头。