详解使用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 相关文章推荐
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
javascript操作数组详解
Dec 17 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
jquery实现聊天机器人
Feb 08 jQuery
Vue.js的模板语法详解
Feb 16 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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学习之PHP运算符
2006/10/09 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
六个窍门助你提高Python运行效率
2015/06/09 Python
详解Python的Django框架中的中间件
2015/07/24 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
护理自荐信
2013/10/22 职场文书
社区文化建设方案
2014/05/02 职场文书
服务标兵事迹材料
2014/05/04 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
专业见习报告范文
2014/11/03 职场文书
奖学金个人总结
2015/03/04 职场文书
军训决心书范文
2015/09/22 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
pandas提升计算效率的一些方法汇总
2021/05/30 Python
手残删除python之后的补救方法
2021/06/26 Python
Python实现视频中添加音频工具详解
2021/12/06 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle