详解使用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 相关文章推荐
IE 当eval遇上function的处理
Aug 09 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
原生javascript如何实现共享onload事件
Jul 03 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 什么是PEAR?(第二篇)
2009/03/19 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
php表单处理操作
2017/11/16 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
Python 列表(List)操作方法详解
2014/03/11 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
《金子》教学反思
2014/04/13 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
经理任命书模板
2014/06/06 职场文书
个人借条范本
2015/05/25 职场文书
小数乘法教学反思
2016/02/22 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS