elementUI table组件，数据筛选设置默认值 ，filtered-value 的用法

最新推荐文章于 2023-12-12 14:18:25 发布
最新推荐文章于 2023-12-12 14:18:25 发布
阅读量7.4k 收藏 6
点赞数 3
分类专栏： 前端开发随记 文章标签： javascript jquery vue.js html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35818228/article/details/109703854
版权

项目最近使用到了elementUI,网上找的都是vue的版本，根据文档，现在使用的jqery+elementUI table，用到了过滤器，关于默认值 filtered-value 的用法，网上怎么都找不到，翻墙找到了用法，记录一下；

<el-table-column align="center"
  fixed
  prop="userStatus"
  label="状态"
  :filters="userStatusData"
  :filtered-value="['启用']"
	:filter-method="filterHandlerStatus"
		  
  width="60">
  
</el-table-column>

:filtered-value="[‘默认筛选的值’]"

静敲敲的代码
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue + vue-resource + element-ui项目中遇到的问题总结
ishell1021的博客
03-08 2206
运营智享遇到的问题(前端) vue + vue-resource + element-ui + vue-router + node.js + sass 1. el-table filter tag 使用filter-method处理数据过滤,当该标签下没有数据时标签切换不起作用 解决: 1.用el-table的filter-change方法处理过滤逻辑,而不用el-table-column...
el-table使用filters的过滤
最新发布
weixin_52115201的博客
05-13 279
在tabledata里面进行foreach组成filters的数组。合适使用的filterHandler，直接从官网复制过来就行。在data里面定义数组。
详解使用element-ui table组件的筛选功能的一个小坑
10-17
在element ui 框架中，对于table框架，有一个筛选功能，这篇文章主要介绍了详解使用element-ui table组件的筛选功能的一个小坑，非常具有实用价值，需要的朋友可以参考下
element-ui的el-table更改筛选值filtered-value后不起作用
changyana的博客
11-24 2868
按照一般的思维，当我在js里赋值 this.filter_value = [‘111’, ‘222’] 之后，table表格应该只加载出topic_name=‘111’和topic_name=‘222’的行信息。但是通过js动态改变筛选数组后，筛选出来的数据还是首次的筛选数组的内容。
ElementUI table 筛选手动赋值问题
Mr-k的博客
07-02 1461
ElementUI table 筛选使用一键全选
elementUI el-table组件，数据筛选，数据回显，单选，多选
sumimg的博客
12-12 1498
定义数据中显示的内容。
filtered-back-projection-master_back_fbp算法_图像重建_
10-02
在图像处理领域，"filtered-back-projection"（滤波反投影）是一种常用的技术，用于将投影数据转换为图像，尤其在计算机断层扫描（CT）中广泛应用。此算法是图像重建过程中的核心部分，旨在从有限角度的一系列投影...
Filtered OFDM_ofdm_Filtered-OFDM_CRLB_filteredofdm_matlab_
10-02
移动网络是一种无线技术，可以通过无线传输提供语音和/或...在过去，电路交换被用来通过网络传输语音，然后我们继续使用两种电路交换以及语音和数据的分组交换，现在我们只使用分组交换，这是如何频谱已从1G扩展到4G
TS-Filtered-SC-Components：过滤产品的共享React组件，用于外部目的
02-06
筛选的共享组件 和朋友的共享组件库。 使用React和Storybook构建。 目录 社区介绍共享组件库是使用构建的，以获取组件的即时视觉反馈，而无需在主应用程序中实际部署/导入它们。 您可以在隔离的环境中处理组件，这有...
python自动办公-11 在Excel中按条件筛选数据并存入新的表
11-04
本教程主要关注如何利用Python在Excel文件中根据特定条件筛选数据，并将筛选结果存入新的工作表。这个过程涉及到多个Python库，如pandas和openpyxl，它们是处理Excel数据的强大工具。 首先，我们需要安装必要的库。...
自动办公-python 在Excel中按条件筛选数据并存入新的表
01-27
Python是一种强大的编程语言...通过以上步骤，你可以实现Python在Excel中的数据筛选和保存，实现自动化办公。这在数据处理、报表生成、数据分析等场景中非常有用。继续深入学习和实践，你将能够处理更复杂的数据任务。
Antd相关 Table表格自定义筛选以及统一清空筛选项
若木無言
01-27 6370
源于一直负责的组件库需求，对Antd表格组件进行了二次封装，简化了很多功能配置项（分页、排序、筛选、样式等），其中对多个列筛选进行统一清空功能遇到了不少坑，记录一下…… 重点是合理使用filteredValue属性。 const MyTable = ({ ...... // 1.定义全局状态，用来存放各列的 filteredValue 状态 const [filteredValues, set_filteredValues] = useState(); // 2.定义通用 colu.
【Antd】Table组件数据重新渲染后筛选项如何清空
流萤梦的博客
09-19 5203
先来说一下我遇到的场景： 如上图，在点击操作按钮之后，会重新请求列表数据，列表数据更新。这个时候如果我先筛选了Age列， 再点击操作按钮更新数据会发现，列表上渲染的数据是经过筛选之后的，筛选项并没有被清空，依旧那么亮眼。 为了更好的描述，我把操作按钮换成了Tab页，可以先来对比一下两个页面： 嘿嘿，我太懒了，大家能区分就行。上图都是没有筛选的情况，如果我筛选之后再切换Tab，就变成了： 筛选条件并没有被清空，但这种情况下，我们希望在切换tab的时候筛选项是清空的，这个时候...
给el-table筛选条件设置默认筛选条件（设置默认过滤值）
吃瓜群众的博客
01-09 8768
我们在实际需求中，表格会有默认过滤值，那么如何设置这个默认过滤值呢 官网demo地址 在js中加上关键代码 mounted() { this.setDefaultFilterValue(); }, methods: { setDefaultFilterValue(){ this.$refs.filterTable.columns[3].filtere...
elementUi中的table组件默认筛选没效果解决方案
Bloxed_shangyc的博客
03-01 9095
解析例如官网的栗子 &lt;el-table-column prop="tag" label="标签" width="100" :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" :filter-method="filterTag" fi..
【记一下】ElementUI 中table 设置默认筛选
u012076762的博客
01-20 2023
参考链接 elementui官网table使用demo链接 【记一下】ElementUI 中table 设置默认筛选 【需求】 为table表实现快捷操作， 如通知用户某项数据达到预警值， 一键预览功能（实际对用户更人性化设计） 【代码】 /** 设置某一列默认过滤 * 封装好的方法（this.$refs.table => 指向table） * @param col 列数 第几列(1开始) * @param val 过滤值 类型是数组（里面的值类型需匹配） */ setDefaultFilter(co
elementUI 表格筛选 默认选中
sumimg的博客
07-05 1555
elementui table表头部分栏位动态
05-30
您可以使用 ElementUI 的作用域插槽（Scoped Slot）来动态渲染表头的每一列。具体实现步骤如下： 1. 在 `el-table-column` 标签中使用 `slot-scope` 属性来定义作用域插槽。 2. 在作用域插槽中使用 `header` 插槽来渲染表头内容，并通过 `props.column` 访问当前表头列的信息。 例如，以下代码可以实现动态添加表头列的功能： ``` <template> <el-table :data="tableData"> <el-table-column v-for="(column, index) in dynamicColumns" :key="index" :label="column.label" :prop="column.prop" :width="column.width" :sortable="column.sortable" :index="column.index" :formatter="column.formatter" :show-overflow-tooltip="column.showOverflowTooltip" :align="column.align" :header-align="column.headerAlign" :class-name="column.className" :label-class-name="column.labelClassName" :reserve-selection="column.reserveSelection" :fixed="column.fixed" :resizable="column.resizable" :column-key="column.columnKey" :filters="column.filters" :filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple" :filter-method="column.filterMethod" :filtered-value="column.filteredValue" :render-header="renderHeader(column)" ></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 22, address: 'New York' }, { name: 'Jane', age: 23, address: 'London' }, { name: 'Bob', age: 25, address: 'Paris' } ], dynamicColumns: [ { label: 'Name', prop: 'name', width: '100px' }, { label: 'Age', prop: 'age', width: '100px' } ] } }, methods: { renderHeader(column) { if (column.prop === 'address') { return ( <div> { column.label } <el-button size="mini" type="text" icon="el-icon-plus" onClick={() => this.addColumn()}></el-button> </div> ) } else { return column.label } }, addColumn() { this.dynamicColumns.push({ label: 'Address', prop: 'address', width: '100px' }) } } } </script> ``` 在上述代码中，我们首先定义了一个 `dynamicColumns` 数组来存储动态添加的表头列信息。然后，在 `el-table-column` 标签中使用 `render-header` 属性来渲染表头内容，通过 `renderHeader` 方法来判断是否需要添加按钮，并在按钮点击事件中动态添加表头列。最后，我们通过 `v-for` 指令来动态渲染表格列。 注意：这里使用了 JSX 语法，如果你不熟悉可以先学习一下。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值