详解使用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 实现的自定义对话框
Mar 24 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
js实现简单点赞操作
Mar 17 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
生成缩略图
2006/10/09 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
python比较两个列表大小的方法
2015/07/11 Python
Python中取整的几种方法小结
2017/01/06 Python
Python变量类型知识点总结
2019/02/18 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Python的几种主动结束程序方式
2019/11/22 Python
python Paramiko使用示例
2020/09/21 Python
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
军训 自我鉴定
2014/02/03 职场文书
ktv筹备计划书
2014/05/03 职场文书
通信工程求职信
2014/07/16 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
放飞理想主题班会
2015/08/14 职场文书
2016年端午节寄语
2015/12/04 职场文书
python基础之错误和异常处理
2021/10/24 Python
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL