详解使用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 相关文章推荐
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
如何使用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实现的生成静态HTML速度快类库
2007/03/31 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
js post提交调用方法
2014/02/12 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python字符串排序方法
2014/08/29 Python
Python 数据结构之队列的实现
2017/01/22 Python
浅谈Python peewee 使用经验
2017/10/20 Python
python os模块简单应用示例
2019/05/23 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
专科毕业生就业推荐信
2013/11/01 职场文书
小学毕业感言150字
2014/02/05 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
人民调解员培训方案
2014/06/05 职场文书
拾金不昧表扬信
2015/01/16 职场文书
城管年度个人总结
2015/02/28 职场文书
电力工程合作意向书
2015/05/11 职场文书
入党申请书格式
2019/06/20 职场文书