详解使用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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
JavaScript脚本性能的优化方法
Feb 02 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
如何使用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中的CMS的涵义
2007/03/11 PHP
php 定界符格式引起的错误
2011/05/24 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python pytest进阶之fixture详解
2019/06/27 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Tensorflow 实现释放内存
2020/02/03 Python
python如何调用字典的key
2020/05/25 Python
Python中qutip用法示例详解
2020/10/02 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
化学实验员岗位职责
2013/12/28 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
新书发布会策划方案
2014/06/09 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
风之谷观后感
2015/06/11 职场文书
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL