详解使用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 相关文章推荐
Function.prototype.bind用法示例
Sep 16 Javascript
jQuery的框架介绍
May 11 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
jquery实现抽奖功能
Oct 22 jQuery
React实现动效弹窗组件
Jun 21 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/03 冲泡冲煮
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
详解重置Django migration的常见方式
2019/02/15 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
进修护士自我鉴定
2013/10/14 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
党员证明信
2015/06/19 职场文书
贷款收入证明格式
2015/06/24 职场文书