element ui 表格筛选组件封装

最新推荐文章于 2024-08-14 18:11:18 发布

土豆块

最新推荐文章于 2024-08-14 18:11:18 发布

阅读量381

点赞数

文章标签： javascript 前端 vue.js elementui

本文链接：https://blog.csdn.net/weixin_43465396/article/details/130056663

版权

本文介绍如何封装Element UI的表格筛选组件，适用于前端开发，特别是Vue.js项目中，提高表格数据处理的效率。通过QueryParam组件，实现便捷的筛选功能，提升用户体验。

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

此组件建议与表格组件共同食用
表格组件

一、新建QueryParam组件
在这里插入图片描述
1.index.vue 页面内容如下

<template>
  <div class="pd1315">
    <el-form
      ref="queryForm"
      :inline="true"
      :model="queryForm"
      class="demo-form-inline"
    >
    <--表单内容自行定义，以下为模板展示->
      <el-form-item
        v-if="defaultQueryForm.nickname"
        label="姓名:"
      >
        <el-input
          v-model="queryForm.nickname"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        v-if="defaultQueryForm.role_id"
        label="角色:"
      >
        <el-select
          v-model="queryForm.role_id"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="defaultQueryForm.area"
        label="省/市/区:"
      >
        <el-cascader
          clearable
          :options="areaList"
          :props="areaProps"
          @change="handleArea"
        />
      </el-form