详解使用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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 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判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
python检测IP地址变化并触发事件
2018/12/26 Python
Python加速程序运行的方法
2020/07/29 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
党支部书记岗位责任制
2014/02/11 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
世界红十字日活动总结
2015/02/10 职场文书
国富论读书笔记
2015/06/26 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
MySQL 时间类型的选择
2021/06/05 MySQL
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏