详解使用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 核心参考教程 内置对象
Oct 13 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
javascript 动态创建表格
Jan 08 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
PHP句法规则详解 入门学习
2011/11/09 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
Python 流程控制实例代码
2009/09/25 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
django中的图片验证码功能
2019/09/18 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python