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. 重启本地环境

<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” 这个插件,然后进行相应的配置 

备注: 勾选的值,不会改变表头。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,088评论 0 29
  • 十月繁荣,世界鼎沸,让人期待。在遥远的大洋彼岸,万众瞩目的NBA联赛正式开启新一个赛季。看点层出不穷,巨星所向披靡...
    氧气是个地铁阅读 282评论 0 3
  • 一、选择题 1、选择题的特点①.基本知识、基本规律及拓展。②.知识归类、类比。③.物理知识与实际生活、现代科技相结...
    陈士武阅读 767评论 0 0