元素用户界面组件桌子实现自定义筛选功能的示例代码

元素用户界面默认的桌子组件支持的表头筛选（过滤)是比较简单的，只支持数组的方式，单选或多选的形式，但有时候我们喜欢支持输入框形式（其实感觉有点扯淡，一般列表页上面都有搜索条件)。

注意：里面用到的小艾语法，可能需要安装一些插件。

准备工作：

1.安装巴别尔插件jsx v模型插件

npm i babel-plugin-jsx-v-model -D或者

纱线添加巴别塔-插件jsx-v-模型D2.babelrc:

{ '预置： ['es2015']，'插件： ['jsx-v-model '，' transform-vue-jsx']}3 .重启本地环境

实现效果如下：

代码如下：

模板div El-table :数据=' tableData ' El-table-列标签='这是文字：渲染-标题='渲染标题'道具='名称'/El-表格-列El-表格-列标签='地址prop=' address '/El-table-column/El-table/div/template script导出默认值{ data(){ return { search : }，visible: false，tabledata :[{ date : ' 2016-05-02 '，name: '王小虎，地址： '上海市普陀区金沙江路1518 弄}，{ date: '2016-05-04 '，name: '王小虎，地址： '上海市普陀区金沙江路1517 弄}，{ date: '2016-05-01 '，name: '王小虎，地址： '上海市普陀区金沙江路1519 弄}，{ date: '2016-05-03 '，name: '王小虎，地址： '上海市普陀区金沙江路1516 弄}] } }，methods: { renderHeader(h，{column，$index}，index) {返回(跨度问题分类波波夫放置=' bottom ' width=' 200 ' height=' 200 ' trigger=' click ' v-model={ this。 可见} span slot=' reference ' I class=' El-icon-search ' style={ this。搜索？{ ' color ' : ' red ' } : { ' color ' : ' blue ' }/I/span El-input size=' small ' v-model={ this。搜索}占位符='请输入内容/El-输入div class=' El-表格-过滤器_ _底部'按钮class={this.search？"^ :"已被禁用"筛选/button button on-click={ this。clearsearch }重置/button/div/El-popover/span)；}，clearSearch(){ this。搜索=' '；} } }/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。