element-ui组件table实现自定义筛选功能

2019-03-15 admin

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

实现效果如下: 图片描述

代码如下:

<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>

参考: https://www.jianshu.com/p/f55…

[转载]原文链接:https://segmentfault.com/a/1190000018516736

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-57745.html

文章标题:element-ui组件table实现自定义筛选功能

相关文章
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
好消息!好消息!饿了么ElementUI用户的福音——ElementUIVerify!
如果你受够了饿了么ElementUI原生的校验方式,那就来试试它吧! 前言 饿了么ElementUI虽好,但表单校验的体验不够理想 如果说产品开发要讲究用户体验,那插件开发也要讲究开发体验,而好的开发体验,要靠好的api设计来保障 本人专注...
2017-12-24
搜狐发力html5让用户更爽,自媒体人更嗨
曾经有资深互联网分析师说过”2015年,新闻综合类 APP 如果还没有大量的个性化阅读功能,将被淘汰出局。”枣哥非常同意此观点,移动互联网时代已经席卷全球,移动互联网代表的就是个性张扬的时代,在互联网圈说道个性张扬首先想到的是搜狐老板张朝阳...
2015-11-12
JS生成一维码(条形码)功能示例
本文实例讲述了JS生成一维码(条形码)功能的方法。分享给大家供大家参考,具体如下: 1、js代码: (function() { if (!exports) var exports = window; var BARS = [212...
2017-03-01
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: &lt;span style=&quot;font-size:14px;&quot;&gt; &lt;HTML&gt; &lt...
2017-03-06
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
回到顶部