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


Posted in Javascript onNovember 02, 2018

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

使用自定义模板和筛选功能,一开始的代码

<el-table-column v-if="key==='isShow'" label="是否在发现页展示" :filters="[{text:'已展示',value: true},{text: '未展示', value: false}]" :filter-method="filterShow">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.isShow">显示</el-tag>
          <el-tag type="danger" v-else>不显示</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-else-if="key==='isHandle'" label="是否已经审核" :filters="[{text:'已处理',value: true},{text: '未处理', value: false}]" :filter-method="filterHandle">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.isHandle">已处理</el-tag>
          <el-tag type="warning" v-else>未处理</el-tag>
        </template>
      </el-table-column>

然后发现筛选功能怎么都不能实现,上网查找原因才发现,虽然官网在写自定义模板的示例代码时是这样的:

<template>
 <el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
   label="日期"
   width="180">
   <template slot-scope="scope">
    <i class="el-icon-time"></i>
    <span style="margin-left: 10px">{{ scope.row.date }}</span>
   </template>
  </el-table-column>
  <el-table-column
   label="姓名"
   width="180">
   <template slot-scope="scope">
    <el-popover trigger="hover" placement="top">
     <p>姓名: {{ scope.row.name }}</p>
     <p>住址: {{ scope.row.address }}</p>
     <div slot="reference" class="name-wrapper">
      <el-tag size="medium">{{ scope.row.name }}</el-tag>
     </div>
    </el-popover>
   </template>
  </el-table-column>
  <el-table-column label="操作">
   <template slot-scope="scope">
    <el-button
     size="mini"
     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button
     size="mini"
     type="danger"
     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
   </template>
  </el-table-column>
 </el-table>
</template>

<script>
 export default {
  data() {
   return {
    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: {
   handleEdit(index, row) {
    console.log(index, row);
   },
   handleDelete(index, row) {
    console.log(index, row);
   }
  }
 }
</script>

就是使用scope代替了prop,就是没有加上prop。

这就是坑所在地方,element的内部使用筛选功能时应该是使用到了prop,所以加上prop之后筛选功能就可以用了:

<el-table-column v-if="key==='isShow'" label="是否在发现页展示" prop="isShow" :filters="[{text:'已展示',value: true},{text: '未展示', value: false}]" :filter-method="filterShow">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.isShow">显示</el-tag>
          <el-tag type="danger" v-else>不显示</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-else-if="key==='isHandle'" label="是否已经审核" prop="isHandle" :filters="[{text:'已处理',value: true},{text: '未处理', value: false}]" :filter-method="filterHandle">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.isHandle">已处理</el-tag>
          <el-tag type="warning" v-else>未处理</el-tag>
        </template>
      </el-table-column>

使用elementUi 的table组件的筛选功能记得加prop!!!

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

Javascript 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 #Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 #Javascript
vue头部导航动态点击处理方法
Nov 02 #Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 #Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 #Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 #Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 #Javascript
You might like
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
JS的反射问题
2010/04/07 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
详解原生JS动态添加和删除类
2019/03/26 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
Python制作刷网页流量工具
2017/04/23 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python多任务之协程的使用详解
2019/08/26 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
城市轨道专业个人求职信范文
2013/09/23 职场文书
教育系毕业生中文求职信范文
2013/10/06 职场文书
建筑实习自我鉴定
2013/10/18 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
委托证明模板
2014/09/16 职场文书
培根随笔读书笔记
2015/07/01 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python