<element-ui组件table实现自定义筛选功能的示例代码
您的当前位置:首页正文

element-ui组件table实现自定义筛选功能的示例代码

2023-12-07 来源:六三科技网

element-ui默认的table组件支持的表头筛选(过滤)是比较简单的,只支持数组的方式,单选或多选的形式,但有时候我们喜欢支持输入框形式(其实感觉有点扯淡,一般列表页上面都有搜索条件)。

注意:里面用到的jsx语法,可能需要安装一些插件。

准备工作:

1.安装babel-plugin-jsx-v-model插件

npm i babel-plugin-jsx-v-model -D

或者

yarn add babel-plugin-jsx-v-model -D

2..babelrc:

{ "presets": ["es2015"], "plugins": ["jsx-v-model", "transform-vue-jsx"]}

3.重启本地环境

实现效果如下:

代码如下:

<template> <div> <el-table :data="tableData"> <el-table-column label="这是文字" :render-header="renderHeader" prop="name"></el-table-column> <el-table-column label="地址" prop="address"></el-table-column> </el-table> </div></template><script>export default { data() { return { search: '', visible: false, 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: { renderHeader(h, {column, $index}, index) { return ( <span> 问题分类 <el-popover placement='bottom' width='200' height='200' trigger="click" v-model={this.visible}> <span slot="reference"> <i class="el-icon-search" style={this.search ? {'color' : 'red'} : {'color': 'blue'}}></i> </span> <el-input size='small' v-model={this.search} placeholder='请输入内容'></el-input> <div class='el-table-filter__bottom'> <button class={this.search ? '' : 'is-disabled'}>筛选</button> <button on-click={this.clearSearch}>重置</button> </div> </el-popover> </span> ); }, clearSearch() { this.search = ''; } }}</script>

小编还为您整理了以下内容,可能对您也有帮助:

element-ui&table 多选的筛选功能 不用点击筛选按钮,勾选就能触发搜索值

起因--------》勾选后+筛选+搜索的用户体验有点差。。。

优化成-----》勾选后+搜索(带勾选参数)

如果--------》勾选后+筛选做触发搜索事件用@filter-change即可。

版本:elementui2.3.9版本

<el-table :data="data"  @header-click="headerClick"(其他属性未考究)

以上获取到整个对象,其中的属性值【filteredValue】为当前选中(无论是否点击筛选按钮)的值,给table+ref【filteredValue】值貌似打印不到正确值, el-table-column属性值【column-key】----column-key=="x1" 进行11对应,将获取的column值进行存储。

即【header-click当某一列的表头被点击时会触发该事件】,之后选取内容之后会修改到filteredValue内存地址的值,即可以获取到勾选项。

但有个小问题,当用header-click(event事件)鼠标处于下拉框的图标元素块内时,不触发该事件。so~

.xxxxxx .el-table__column-filter-trigger{pointer-events: none;}进行 ‘元素击穿‘’ (兼容性待考究)

ps:非即时记录,可能存在问题,望指出~

基于elementui的表头自定义筛选功能

render-header(ps):

列标题 Label 区域渲染使用的 Function

Function(h, { column, $index })

      <el-table-column prop="sowStatus" label="状态" align="center" :render-header="renderHeader" min-width="90">

          <template slot-scope="scope">

            <div v-if="scope.row.sowStatus == null">-</div>

            <div v-else>

              <span v-if="scope.row.sowBackFlag">已退回</span>

              <span v-else>{{emnuList.get(scope.row.sowStatus)}}</span>

            </div>

          </template>

        </el-table-column>

renderHeader(createElement, { column, $index }) {

      let proty = column.property

      // console.log('该列的绑定数据', column)

      // console.log(proty)

      return createElement(

        'div',

        {

          style: 'display:flex;justify-content: center;'

        },

        [

          createElement(TableHeader, {

            style: 'cursor: pointer;',

            props: {

              column: column,

              options: proty,

              tableQuery: this.tableParams,

            }

          })

        ]

      )

    }

<template>

  <div class="table-header">

    <span @click="clickIcon(column)">{{ column.label }}<span class="el-icon-sort"></span></span>

  </div>

</template>

<script>

export default {

  name: 'TableHeader',

  data() {

    return {}

  },

  props: {

    type: {

      type: String,

      default: ''

    },

    defaultValue: {

      type: String,

      default: ''

    },

    options: {

      type: [Array, String],

      default: function() {

        return []

      }

    },

    defaultProps: {

      type: Object,

      default: function() {

        return {

          label: 'label',

          value: 'value'

        }

      }

    },

    //传递过来的接口参数

    tableQuery: {

      type: Object,

      default: function() {

        return {}

      }

    },

    cancelCb: {

      type: Function

    },

    // 父组件传递过来的自定义表列名字

    column: {

      type: Object,

      default: function() {

        return {

          label: 'label',

          value: 'value'

        }

      }

    }

  },

  mounted() {},

  methods: {

    clickIcon(column) {

      // 在这里处理排序的逻辑

    }

  }

}

</script>

<style scoped></style>

import TableHeader from './TableHeader'

elementUI 结合createElement自定义table头部筛选

用elementUI的table处理数据时经常要遇到筛选,但element官方对表格的筛选具有一定的局限性,所以自己结合createElement写了一个类似搜索的列筛选功能。如下图:

利用elementUI自带 render-header 表格列操作的属性

结合 createElement 创建虚拟DOM。

以上步骤基本实现了自定义table头部筛选。

六三科技网还为您提供以下相关内容希望对您有帮助:

基于elementui的表头自定义筛选功能

&lt;el-table-column prop="sowStatus" label="状态" align="center" :render-header="renderHeader" min-width="90"&gt;      &amp;...

element-ui&amp;table 多选的筛选功能 不用点击筛选按钮,勾选就能触发搜索值...

如果---》勾选后+筛选做触发搜索事件用@filter-change即可。版本:elementui2.3.9版本 &lt;el-table :data="data"  @header-click="headerClick"(其他属性未考究)以上获取到整个对象,其中的属性值【filtered...

elementUI 结合createElement自定义table头部筛选

利用elementUI自带 render-header 表格列操作的属性 结合 createElement 创建虚拟DOM。以上步骤基本实现了自定义table头部筛选。

vue elementUI实现el-table点击行单选, 点击行多选,点击复选框单选效果...

首先:table绑定点击行事件 @row-click="rowClick"绑定复选框勾选事件 @select="handleSelectionChange"1、点击行多选 2、点击行单选 3、table复选框单选 点击复选框单选效果 记录选中数据 4、table复选框多选 ...

elementUI自定义table多选

elementUI的table组件提供的toggleRowSelection方法不生效 实现     a-首先放弃使用组件内置提供的seletion选项,使用插槽自定义     b-当获取数据后,向自定义的选择框添加绑定事件    ...

element-ui中的table可分页多选功能-记住上一页勾选数据

vue中使用el-table,点击下一页后常需要记住上一页所勾选的数据 2.然后第一列,即有多选框的一列,添加:reserve-selection="true"3.然后在methods中添加函数:如果需要清除勾选数据(刷新也页面跳转后会自动清除)

elementUI table 怎么控制复选框只能选中两个?

首先在 el-table 标签上添加,ref="multipleTable" @select="select" @select-all="selectAll"再在 methods 中添加以下方法,即可 select(selection, row) { console.log('当用户手动勾选数据行的 Checkbox 时触发的事件...

[ElementUI] 修改默认语言为英文 el-table filter 筛选

也就是不是用vue-cli. 关于vue-cli 与webpack的关系可以看 vue官方解释 。如果你用vue-cli3,而且只需要切换成英文, 你可以用以下步骤操作:shims-element-ui.d.ts 里面的内容是 2.修改main.ts 在vue中注入local...

element ui 实现table表头自定义展示

每个el-table-column添加v-if="colData[0].show",对应colData同位置字段。js:实现效果:方法二:Popover 弹出框 html:同样在el-table-column添加v-if="colData[4].istrue",然后:js:实现效果:

关于vue中的过滤器使用--结合element-ui的table项

在element-ui中表格的显示中,插槽的具体使用。table按照tableData这个数组的长度来生成多少行,按照有多少个el-table-column来生成多少列。&lt;template slot-scope="scope"&gt; 在&lt;el-table-column&gt;中使用自定义模板,实现对渲染...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top