详解使用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写的日历(代码部分网摘)
Sep 20 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
JS Object构造函数之Object.freeze
Apr 28 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中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
医学专业毕业生个人的求职信
2013/12/04 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
求职信结尾怎么写
2014/05/26 职场文书
电子商务专业自荐信
2014/06/02 职场文书
酒后驾车标语
2014/06/30 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
公司员工体检通知
2015/04/21 职场文书
高一军训口号
2015/12/25 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
Python使用openpyxl批量处理数据
2021/06/23 Python