element-ui组件table实现自定义筛选功能的示例代码


Posted in Javascript onMarch 15, 2019

element-ui默认的table组件支持的表头筛选(过滤)是比较简单的,只支持数组的方式,单选或多选的形式,但有时候我们喜欢支持输入框形式(其实感觉有点扯淡,一般列表页上面都有搜索条件)。

注意:里面用到的jsx语法,可能需要安装一些插件。

准备工作:

1.安装babel-plugin-jsx-v-model插件

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

实现效果如下:

element-ui组件table实现自定义筛选功能的示例代码

代码如下:

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="这是文字" :render-header="renderHeader" prop="name"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      visible: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    renderHeader(h, {column, $index}, index) {
      return (
        <span>
          问题分类
          <el-popover placement='bottom' width='200' height='200' trigger="click" v-model={this.visible}>
            <span slot="reference">
              <i class="el-icon-search" style={this.search ? {'color' : 'red'} : {'color': 'blue'}}></i>
            </span>
            <el-input size='small' v-model={this.search} placeholder='请输入内容'></el-input>
            <div class='el-table-filter__bottom'>
              <button class={this.search ? '' : 'is-disabled'}>筛选</button>
              <button on-click={this.clearSearch}>重置</button>
            </div>
          </el-popover>
        </span>
      );
    },
    clearSearch() {
      this.search = '';
    }
  }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue过滤器用法实例分析
Mar 15 #Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 #Javascript
详解vue移动端项目代码拆分记录
Mar 15 #Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 #Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 #Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 #Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 #Javascript
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
php单例模式的简单实现方法
2016/06/10 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
基于vue实现分页效果
2017/11/06 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
对numpy中shape的深入理解
2018/06/15 Python
python监控文件并且发送告警邮件
2018/06/21 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python占位符输入方式实例
2019/05/27 Python
python输出决策树图形的例子
2019/08/09 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
大学毕业生通用自荐信范文
2013/10/31 职场文书
班主任班级寄语大全
2014/04/04 职场文书
军训口号
2014/06/13 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL