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 相关文章推荐
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
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
php set_time_limit()函数的使用详解
2013/06/05 PHP
PHP生成随机密码类分享
2014/06/25 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
jquery实现上传文件进度条
2020/03/26 jQuery
用jQuery实现抽奖程序
2020/04/12 jQuery
详解JavaScript中的this指向问题
2021/02/05 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python读写zip压缩文件的方法
2018/08/29 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
海洋科学专业求职信
2014/08/10 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS