需求：element UI table表頭篩選彈出框+級聯(lián)選擇器篩選
準(zhǔn)備工作：
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. 重啟本地環(huán)境
<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. 獲取了對應(yīng)的數(shù)據(jù)，彈出框不消失
showPopoverFn() { this.visible = false },
遇到的問題
1. 獲取了對應(yīng)的數(shù)據(jù)才菠，彈出框不消失
2. jsx 不支持v-model 語法现柠，需要裝“babel-plugin-jsx-v-model” 這個插件旁赊，然后進行相應(yīng)的配置?
備注： 勾選的值谷暮，不會改變表頭亚享。
