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

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>

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

(0)

相关推荐

  • element ui table 增加筛选的方法示例

    网上大部分都可以增加筛选功能,但没有找到下列这种情况. 若表头数据较多,而表头是自己通过v-for循环产生,这种情况怎么给虚拟dom添加筛选规则. <el-table-column v-for="item in tableHead" :key="item.id" :prop="item.id" :label="item.label" :filters="item.filter" :filter-met

  • 详解使用element-ui table组件的筛选功能的一个小坑

    使用element-ui table组件的筛选功能的一个小坑 使用自定义模板和筛选功能,一开始的代码 <el-table-column v-if="key==='isShow'" label="是否在发现页展示" :filters="[{text:'已展示',value: true},{text: '未展示', value: false}]" :filter-method="filterShow"> <tem

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

    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: { "p

  • Android Filterable实现Recyclerview筛选功能的示例代码

    原先碰到筛选这种功能时,后端的接口都会让上传一个字段,根据字段来返回相应的数据.后来一次和别人对接时,接口直接返回全部数据,而且还要实现筛选功能.我...我说不就是一条sql语句的事,改接口多方便,我苦心劝导,然后被怼回来,切,不就是筛选嘛,求人不如自己搞. 1. 效果图 2. 思路 既然是筛选,那就少不了比较.也没有什么好的办法,无非就是循环对比,然后将适配器进行数据更新.页面刷新即可.但筛选的调用要方便,怎么比较才方便我们调用呢?偶然间看到了Filterable,使Adapter继承自该接口

  • Flutter实现自定义筛选框的示例代码

    目录 一.首先自定义筛选框的按钮视图,布局很简单,一个listView就可以搞定. 二.定义筛选数据展示列表视图. 一.首先自定义筛选框的按钮视图,布局很简单,一个listView就可以搞定. 1.在数据model中添加了一个selectedModel属性,用来记录当前已选择的筛选项(目前仅支持单选). 2.当按钮数量小于3个时,按钮最大宽度为屏幕宽度的1/3:小于屏幕宽度时,则为屏幕宽度/按钮数量. 具体代码如下: var text = model.selectedFilterModel !=

  • element ui表格实现下拉筛选功能

    本文实例为大家分享了element ui表格实现下拉筛选的具体代码,供大家参考,具体内容如下 1.default-sort中prop传入要排序的字段(接口返回或自己定义的数据).order代表排序,这里用到降序 2.filters对象中text代表页面中显示的筛选文字,value代表筛选用到的值,在方法中filterHandler用到 3.column 的 key,如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件(绑定的是要对接口中排序的字段) 4

  • Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

    2017年底了,总结了这一年多来的前端之路,Vue从入门到放弃,再二进宫,从 Vue1.0 持续跟踪到 Vue2.5.结合公司的一些实际项目,也封装了一些比较实用的组件. 由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不啰嗦,直接上代码. 2.实现思路 2.1.Element UI 引入(整体引入) main.js // Element UI import Element from 'element-

  • element表格组件实现右键菜单的功能

    目录 前言 实现思路 最后 前言 最近产品给我提了个需求 ————想要实现用户右键table的某一行时,显示该行操作栏的功能.觉得这个需求挺有意思的,特此分享给大家. 技术栈: elementUI 实现思路 要实现右键菜单 我们需要定义一个菜单栏组件 当用户点击table的某一行时,我们处理好显示位置再将菜单栏渲染到table上.先实现这个rightKeyMenu组件: // right-key-menu.vue <template> <div id="right-key-me

  • vue 使用饿了么UI仿写teambition的筛选功能

    问题描述 teambition软件是企业办公协同软件,相信部分朋友的公司应该用过这款软件.里面的筛选功能挺有意思,本篇文章,就是仿写其功能.我们先看一下最终做出来的效果图 大致的功能效果有如下 需求一:常用筛选条件放在上面直接看到,不常用筛选条件放在添加筛选条件里面 需求二:筛选的方式有输入框筛选.下拉框筛选.时间选择器筛选等 需求三:如果觉得常用筛选条件比较多的话,可以鼠标移入点击删除,使之进入不常用的筛选条件里 需求四:也可以从不常用的筛选条件里面点击对应筛选条件使之"蹦到"常用筛

  • Vue + Element UI 实现权限管理系统之菜单功能实现代码

    目录 菜单功能实现 菜单接口封装 菜单管理界面 测试效果 源码下载 菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', m

  • Element UI中table单元格合并的解决过程

    目录 引言 解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结 引言 项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.

  • 使用vue-cli导入Element UI组件的方法

    首先第一步,现在命令行中输入npm i element-ui,如: 接着在mian.js 中添加 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 如:=> 最后在命令行输入npm run dev打开自己创建的项目就可以使用了 总结 以上所述是小编给大家介绍的使用vue-cli导入Element UI组件的方法,希望对大家有所帮助,如果大家有任何疑

随机推荐