详解使用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 相关文章推荐
jquery 学习之一 对象访问
Nov 23 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
个人小程序接入支付解决方案
May 23 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
javascript中 try catch用法
2015/08/16 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
物业管理个人自我评价
2013/11/08 职场文书
自我评价个人范文
2013/12/16 职场文书
四群教育工作实施方案
2014/03/26 职场文书
领导干部对照检查材料
2014/08/24 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
初三数学教学反思
2016/02/17 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
PHP基本语法
2021/03/31 PHP