纯前端实现各类表单组件单条件查询功能（看完必会）

最新推荐文章于 2024-04-19 12:18:43 发布

不就是个div嘛

最新推荐文章于 2024-04-19 12:18:43 发布

阅读量8.6k

点赞数 7

分类专栏： Element 前端小白文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_48940868/article/details/111869770

版权

本文介绍了如何使用Vue.js和JavaScript纯前端实现表单组件的单条件查询功能。核心问题是数据查询后的还原和查询算法，通过保留原始数据并使用`indexOf()`方法进行匹配。在实现中需要注意还原操作、大小写敏感性和输入框的处理。文章提供了关键代码示例。

摘要由CSDN通过智能技术生成

学习目标：

如题目所示，再也不用苦苦等待后端的数据配合，前端独立实现。
【当然，真正前后端分离项目，还是后端大佬说了算】

样式图展示：

结构样式自己去完，都是饿了么UI组件

核心问题：

数据查询成功后，如何还原？
查询功能的核心算法是什么？
本功能最应该注意什么问题？

【1】
由于查询功能是用的数组的filter方法来实现过滤的，所以它返回的是一个新数组，言下之意：它会改变原来的tableData数据，这样来处理还原的问题不好控制。
所以，最开始的就要准备好一份原始数据，然后接下来的任何操作需要用到的—都用原始数据深拷贝出来的数据，这样有一个好处：
当你需要还原的时候，就可以直接把原始数据赋值给需要还原的地方即可。

【2】
核心算法：父串.indexOf(子串)
indexOf()方法返回的结果只要是 ！== -1 那么，就代表子串里面至少有一个是在父串里面的。

【3】
最应该注意的就是还原问题、输入框大小写敏感问题等。
**indexOf()**方法有两个特点：
（1）大小写敏感————用toLowerCase（）方法来统一转小写，
（2）如果要检索的字符串值没有出现，则返回 -1

不废话，上代码：

表单组件的结构

<div class="zx_userInfo">
        <div>
          <span>加入日期：</span>
          <el-date-picker
            style="width: 260px"
            v-model="formData.datevalue"
            type="daterange"
            range-separator="————"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>

        <div>
          <span>是否集团公司：</span>
          <el-select v-model="formData.value1" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div>
          <span>地区选择：</span>
          <el-cascader
            clearable
            v-model="formData.value2"
            :options="options2"
            :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
        </div>

        <div>
          <span>集团编码/集团名称：</span>
          <el-input
            clearable
            v-model="formData.input"
            placeholder="请输入内容"
            style="width: 160px"
          ></el-input>
        </div>
      </div>

查询、重置按钮结构

<!-- 查询重置按钮 -->
      <div class="btns">
        <el-button
          type="primary"
          round
          style="margin: 0 58px; width: 145px"
          @click="handleSearch"
          >查询</el-button
        >
        <el-button
          type="info"
          round
          style="margin-right: 50px; width: 145px"
          @click="ResetSelect"
          >重置</el-button
        >
      </div>

el-table表格组件和分页

<!-- 下面table表格展示栏 default-expand-all展开子行数据 -->
    <div class="container_table">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100%; margin-bottom: 20px; min-height: 288px"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop=