详解使用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 ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
vue3中的组件间通信
Mar 31 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写的AES加密解密类分享
2014/06/20 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
浅析python中的分片与截断序列
2016/08/09 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
大学学习生活感言
2014/01/18 职场文书
法定代表人资格证明书
2014/09/11 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
运动会加油稿50字
2015/07/21 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python