详解使用element-ui table组件的筛选功能的一个小坑

使用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!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Layui组件Table绑定行点击事件和获取行数据的方法

    一个项目里面用了layui,简直无数个坑... 这里先记录一个行点击事件的坑,后面慢慢补充. 初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的tr绑定双击事件,然后获取Index,再从数据集里面取出行数据; done: function(res, curr, count){ $('#div').find('.layui-table-body').find("table" ).find("tbody").child

  • Java Swing组件编程之JTable表格用法实例详解

    本文实例讲述了Java Swing组件编程之JTable表格用法.分享给大家供大家参考,具体如下: 表格是GUI编程中使用较多,但也是最麻烦的一个控件之一.表格是用来显示二维数据,提供编辑,选择等功能.如果只是显示数据,这还是非常easy的,只要在JTable中传入二维数组或集合就可以了. 示例1: package awtDemo; import javax.swing.JFrame; import javax.swing.JScrollPane; import javax.swing.JTab

  • Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

    背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! 出现的问题: 1.使用 Layui 官方提供的 [转换静态表格] 方式初始化加载时报 id 找不到的错误(自己的锅) 2.传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当

  • vxe-table vue table 表格组件功能

    一个功能更加强大的 Vue 表格组件 查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •导出 CSV •显示/隐藏列 •加载中 •格式化内容 •自定义模板 •快捷菜单 •滚动渲染 •展开行 •树形表格 •可编辑表格 •数据校验 •全键盘操作 •Excel 表格 例子 <template> <div> <

  • Element-UI Table组件上添加列拖拽效果实现方法

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup 事件来修改删减 dom 节点 但 Vue 是一个数据驱动的前端框架,开发时应尽量避免操作 dom 而且 Element-UI 的 Table 组件封装得很严谨,直接操作 dom 很容易产生不可预计的 bug 所以我的核心思路就是:通过一个数组渲染表头(列),然后修改这个数组的顺序,从而修改列表的列

  • JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

    正文 前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bootstrapTable的冻结列效果,并且可以兼容ie浏览器.这一年的时间,不断有园友以及群里面的朋友问过我关于固定高度之后,冻结列页面效果不能对齐的问题,奈何博主太忙,一直没有抽空将这个问题优化.最近项目里面也不断有人提过这个bug,这下子不能再推了,必须要直面"惨淡的bug",于

  • 微信小程序如何自定义table组件

    背景 最近想要捣鼓一个自己的小程序,其中数据展示部分比较多,想用table来做展示,但是微信小程序并没有table组件,于是就自己动手捣鼓了一个,勉强能用. 可以看看效果: etable使用介绍 etable的使用很简单,分为 引入.使用.配置等3个阶段 1.引入 首先在要使用的页面中的json文件中配置如下: { "usingComponents": { "etable" : "/compenents/etable/etable" } } 2.

  • 详解使用element-ui table组件的筛选功能的一个小坑

    使用element-ui table组件的筛选功能的一个小坑 使用自定义模板和筛选功能,一开始的代码 <el-table-column v-if="key==='isShow'" label="是否在发现页展示" :filters="[{text:'已展示',value: true},{text: '未展示', value: false}]" :filter-method="filterShow"> <tem

  • 使用 Element UI Table 的 slot-scope方法

    在 Element UI Table 的官网上,有一个"筛选"功能,里面可以利用 slot-scope,给表格记录打标签. 关键代码为: <template slot-scope="scope"> <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>

  • Element中table组件按照属性执行合并操作详解

    在实际开发中,要求使用elementUI的table组件对表格数据上下行相邻相同的数据进行合并,在elem官网上查看到是有对应的组件和合并方法 <el-table :data="tableData" :span-method="objectSpanMethod"> <el-table-column prop="id" label="ID" width="180"> </el-t

  • 详解基于element的区间选择组件校验(交易金额)

    需求: 这里以项目的需求为例,基本的需求如下: 分为左右值,包含左右值,正整数 左侧必须大于等于1,右侧无限大,右侧值必须不小于左侧 左侧填写数据,右侧标为必填:右侧填写数据,左侧标为必填 失焦校验成果: 代码如下:(页面) <el-col :span="8" v-if="item.qttccType === 1"> <el-col :span="14"> <el-form-item :label="ite

  • 关于Element UI table 顺序拖动方式

    目录 Element UI table 顺序拖动 基本使用 element关于table拖拽排序问题 Element UI table 顺序拖动 使用Sortable.js插件.对element-ui中的el-table进行拖拽行排序. new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' }); 官网: [1] Sortable.js官网配置项说明等 [2] Sortable更多使用示例 基本使

  • vuejs+element UI table表格中实现禁用部分复选框的方法

    有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • element UI upload组件上传附件格式限制方法

    如下所示: <el-upload :action="uploadUrl" ref="upload" :multiple="false" :on-change="fileChange" :before-upload="beforeUpload" :on-success="handleAvatarSuccess" :on-preview="file_click" c

  • 详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)

    一.pyqt5的UI中嵌入matplotlib的方法 1.导入模块 导入模块比较简单,首先声明使用pyqt5,通过FigureCanvasQTAgg创建画布,可以将画布的图像显示到UI,相当于pyqt5的一个控件,后面的绘图就建立在这个画布上,然后把这个画布当中pyqt5的控件添加到pyqt5的UI上,其次要导入matplotlib.figure的Figure ,这里要注意的是matplotlib.figure中的Figure,不是matplotlib.pyplot模块中的Figure,要区分清

  • 详解vue中在父组件点击按钮触发子组件的事件

    我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg  4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父组件 <template> <div id="app&qu

  • 详解java如何集成swagger组件

    一:简介 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服务器端的代码,允许API来始终保持同步.Swagger 让部署管理和使用功能强大的API从未如此简单. 二:集成swagger 1.引入pom.xml文件包(导入4个jar包) 注意:jdk1.8以上才能运行swagger2 <!--swagger--> <dependency&g

随机推荐