vue element ui table 过滤功能实现

水深无声 2021-09-27 15:38 890阅读 0赞

# Element UI代码 #

<template>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        border`在这里插入代码片`
        >
        <el-table-column v-for="(kpidata,index) in kpiDataListMap" :render-header="renderHeaderOne"
                         :key="index"
                         :prop="kpidata.propName"
                         :label="kpidata.labelName"
                         show-overflow-tooltip
                         sortable="true"
    
        >
        </el-table-column>
      </el-table>
    
    </div>
    </template>

## script代码 ##

<script>
      export default {
        data () {
          return {
            /**弹出框的过滤值**/
            popoverData:'',
            /**table的列名称汉语及英语*/
            kpiDataListMap: [{
              propName: 'date',
              labelName: '日期',
    
            }, {
              propName: 'name',
              labelName: '姓名',
    
            }, {
              propName: 'address',
              labelName: '地址',
    
            }],
            /**绑定的数据Json*/
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
              tag: '家'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
              tag: '公司'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
              tag: '公司'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
              tag: '公司'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              tag: '家'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
              tag: '公司'
            }]
          }
        },
        /**data和method直接使用逗号隔开**/
        methods: {
          formatter (row, column) {
            return row.address
          },
          filterTag (value, row) {
            return row.tag === value
          },
          filterHandler (value, row, column) {
            debugger
            const property = column['property']
            return row[property] === value
          },
    
          renderHeaderOne (h, {column, $index}) {
    
            return h('span', {}, [
              h('span', {}, column.label),
              h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover' }}, [
                h('i', { slot: 'reference', class:'el-icon-question'}, ''),
                h('div',{},[
                  h('input', { width: '200'}, ''),
                ]),
                h('div',{style:"text-align: right; margin: 0"},[
                  h('button', {type:'primary',size:'mini',
                    on: {
                      click: () => {
                     //点击确认按钮的事件
                      alert('确定');
                      console.log(`${column.label}   ${$index}`)
                                   }
                        }
    
                  }, '确定'),
                  h('span', {}, '          '),
                  h('button', {size:'mini',
                    on: {
                      click: () => {
                      //点击取消按钮的事件
                      alert('取消');
                      console.log(`${column.label}   ${$index}`)
                  }
          }
    
                  }, '取消')
                ]),
    
              ])
            ])
    
          }
        }
    
      }
    </script>

## 执行的效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_27_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_27_color_FFFFFF_t_70]: /images/20210923/dd59015a5d0e4d8f9318242a1a43074d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，890人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE + Element UI + Sortablejs插件实现table列表的拖拽功能

背景： > 实现页面用户自定义 table列表拖拽排序步骤：一、导入 Sortablejs插件 npm

青旅半醒/ 2023年06月18日 12:50/ 0 赞/ 19 阅读

相关 vue实现element-ui表格table拖拽效果

首先需要安装依赖： npm install sortablejs --save-dev 其次导入 ![20191119155340747.png][] ![

深碍√TFBOYSˉ_/ 2023年06月14日 10:55/ 0 赞/ 30 阅读

相关 VUE element-ui之table表格分页完整功能

步骤：表格底部导入分页组件： <el-pagination :current-page.sync="currentPage"

迷南。/ 2023年01月23日 09:51/ 0 赞/ 165 阅读

相关 element-ui复杂table 表格实现

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

àì夳堔傛蜴生んèń/ 2022年12月19日 09:25/ 0 赞/ 307 阅读

相关 VUE element-ui 之table表格导出Excel功能

步骤一：安装依赖 npm install --save xlsx file-saver 引入依赖 import FileSaver from 'fi

短命女/ 2022年11月17日 03:39/ 0 赞/ 340 阅读

相关 vue+element UI的 table组件实现日历

有现成的日历插件但是不符合需求，所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分：此部分为计算的当月的日期且包含是否可选，是否节假日等等可

太过爱你忘了你带给我的痛/ 2022年10月23日 12:59/ 0 赞/ 873 阅读

相关 VUE element-ui之table表格表头下拉筛选功能

步骤：在需要筛选的列中插槽法： <el-table-column prop="mount" label="交易量区间" align="left">

àì夳堔傛蜴生んèń/ 2022年10月19日 04:21/ 0 赞/ 963 阅读

相关 VUE element-ui之el-table表格内嵌进度条功能实现

步骤： el-table中使用插槽方法： <el-table-column prop="num" label="里程数" sortable="" width="2

阳光穿透心脏的1/2处/ 2022年09月02日 12:52/ 0 赞/ 284 阅读

相关 vue element ui table 过滤功能实现

Element UI代码 <template> <div> <el-table :data="tableData"

水深无声/ 2021年09月27日 15:38/ 0 赞/ 891 阅读

相关 element-ui实现table表格的嵌套（table表格嵌套）功能实现

最近在做电商类型的官网，希望实现的布局如下：有表头和表身，所以我首先想到的就是`table`表格组件。 ![在这里插入图片描述][watermark_type_ZmFuZ3p

我不是女神ヾ/ 2021年07月25日 21:02/ 0 赞/ 3399 阅读