VUE Element-ui table表上添加搜索框

朴灿烈づ我的快乐病毒、 2021-09-29 18:38 1145阅读 0赞

背景：现在需要从***table中的数据快速查出想要的数据***

<el-table :data="assetTypeData.filter(data => !assetTypeSearch || data.model_type_name.toLowerCase().includes(assetTypeSearch.toLowerCase()))" style="width: 100%" max-height="250" >
        <el-table-column fixed prop="model_type_number" label="地点Id" width="80"></el-table-column>
        <el-table-column prop="model_type_name" label="存放地点" width="120"></el-table-column>
        <el-table-column align="right" >
            <template slot="header" slot-scope="scope">
                <el-input v-model="assetTypeSearch" size="mini" placeholder="输入关键字搜索" width="120"/>
            </template>
        </el-table-column>
    </el-table>

## 注： ##

1、data绑定数据时需要用到 Element UI 封装的方法，语法为：
    
     :data="渲染数据.filter(data => !检索关键字||data.model_type_name.toLowerCase().includes(检索关键字.toLowerCase()))
    当检索关键字不是字母时，可以去除 toLowerCase()转小写方法
    
    实例：
     :data="assetTypeData.filter(data => !assetTypeSearch || data.model_type_name.toLowerCase().includes(assetTypeSearch.toLowerCase()))
    
    2、assetTypeData值 与 assetTypeSearch值 都需要先定义在使用

Element UI官网：[https://element.faas.ele.me/2.8/\#/zh-CN/component/table][https_element.faas.ele.me_2.8_zh-CN_component_table]

[https_element.faas.ele.me_2.8_zh-CN_component_table]: https://element.faas.ele.me/2.8/#/zh-CN/component/table

发表评论取消回复

表情：

评论列表（有 0 条评论，1145人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue elementui 表格搜索组件封装

1.背景： `介绍：` vue结合element-ui的后台管理系统，会有很多的数据表格，结合数据表格的会有很多搜索选项。我们的搜索栏区域每一个数据表格搜索条件都不一样

Myth丶恋晨/ 2023年09月24日 16:13/ 0 赞/ 71 阅读

相关 ElementUI之table表格表头添加筛选条件

代码： <template> <div class="bg-white px-3" style="margin: -20px;

浅浅的花香味﹌/ 2023年06月19日 02:13/ 0 赞/ 22 阅读

相关 elementUI table自定义表头弹框搜索，排序，显示tag标签

elementUI table自定义表头弹框搜索，排序，显示tag标签允许一种排序，多种搜索条件包括三种类别，添加了solt插槽，也可以自定义：输入框\[

迷南。/ 2023年02月21日 11:59/ 0 赞/ 23 阅读

相关 elementui——带建议的输入框远程搜索

elementui——带建议的输入框远程搜索 <el-autocomplete v-model="state" :fetch-sugges

悠悠/ 2023年01月06日 12:00/ 0 赞/ 184 阅读

相关 vue+elementUI实现动态增加表单项并添加验证

vue+elementUI实现动态增加表单项并添加验证参考elementUI官网以及网上的其他一些资料。话不多说，直接贴代码。 htmt部分： <e

心已赠人/ 2023年01月01日 03:58/ 0 赞/ 262 阅读

相关 vue+elementUI实现动态增加表单项并添加验证

vue+elementUI实现动态增加表单项并添加验证参考elementUI官网以及网上的其他一些资料。话不多说，直接贴代码。 htmt部分： <el-f

秒速五厘米/ 2022年12月31日 14:25/ 0 赞/ 427 阅读

相关 Vue + ElementUI 给el-table添加点击事件

可以分三种情况实现点击事件 1. 针对整行点击 `@row-click=""` <el-table :data="userList" hi

古城微笑少年丶/ 2022年12月10日 02:27/ 0 赞/ 715 阅读

相关 elementUI中table表格添加一列多选框（vue）

效果图如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

梦里梦外;/ 2022年11月26日 08:56/ 0 赞/ 1448 阅读

相关 Vue基于ElementUI实现Table可编辑/添加功能

文章目录效果预览前端代码添加和修改的js 效果预览 ![在这里插入图片描述][20190619134138552.gif] 前端代码

淩亂°似流年/ 2022年01月11日 02:47/ 0 赞/ 337 阅读

相关 VUE Element-ui table表上添加搜索框

背景：现在需要从table中的数据快速查出想要的数据 <el-table :data="assetTypeData.filter(data => !assetT

朴灿烈づ我的快乐病毒、/ 2021年09月29日 18:38/ 0 赞/ 1146 阅读