详解使用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 相关文章推荐
常用的几段javascript代码分享
Mar 25 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
Node.js API详解之 console模块用法详解
May 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
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
javascript每日必学之多态
2016/02/23 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
python海龟绘图实例教程
2014/07/24 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python内置函数locals和globals对比
2020/04/28 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
初级会计求职信范文
2014/02/15 职场文书
授权委托书样本
2014/04/03 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书