对于后台管理系统项目必不可少的就是“增删改查”;而“查”,就会根据表格的列数来显示多少个查询/筛选条件;为了方便因此封装了查询条件(筛选条件)组件 二、组件功能 1、自动排列布局,每行显示4列(即4个条件) 2、内置“查询”和“重置”操作,并且按钮始终居于查询条件的最右侧 3、特定查询条件(如日期范围),可以...
基于ElementUI,在日常开发中,在开发系统的时候,会涉及到表格的查询,很多都是有共同之处,无非是业务不同、字段不同,但是逻辑都是相同的,为此开发公共搜索组件供大家使用,其中还有个树形的公共组件,有兴趣也可以看看。 一、源码部分 1、目录结构 1 2 3
// 是否查询其子目录 false, // 匹配基础组件文件名的正则表达式 /Base[A-Z]\w+\.(vue|js)$/ ) requireComponent.keys().forEach(fileName => { // 获取组件配置 const componentConfig = requireComponent
组件一:搜索条件 =>SearchParams.vue 组件二:el-table和el-pagination =>TablePagintion 考虑到业务的使用场景没用做过多的封装。 (1)组件一:搜索条件代码如下: <template> <el-input placeholder="企业名称"v-model.trim="searchForm.companyName"clearable @keyup.enter.native="getList(undefined)" /> ...
基于element-ui的自定义多条件查询组件。对于大多数业务,查询数据时都需要提前构建许多字段输入框用于查询,这是一件非常繁琐且麻烦的时候,所以开发此组件,方便用户自定义查询的字段。 所需依赖 由于该组件基于element-ui开发,请先加入element-ui插件。 [具体请看Element官网文档](组件 | Element) ...
1.组件 组件中包含了大部分的查询需求,也提供了插槽,并且做了自适应。 <template> <el-form ref="form" label-position="top"> <el-row> <!-- 前部插槽 --> <slot name="front"></slot> <!-- span默认值为4 --> <!-- 依据span值可计算出xs sm md lg xl的默认值 也可自行设置 --> <...
一.实现传递参数的格式是Formdata格式 在请求时设置headers: headers:{“Content-type”:“application/x-www-form-urlencoded”} 二.模糊查询 1.input输入框,模糊查询```javascript<template>
父组件调用 <flight-formref="childRules":formConfig="formConfig":value="form":rules="rules"></flight-form>import flightFormfrom"@/components/flightForm.vue";exportdefault{components:{flightForm,},data(){return{formConfig:{formItemList:[[{type:"text",prop:"airport",label:"站点",name:"airpor...
一、el-input组件的设置 主要代码: <el-inputv-model="inputContent"class="searchinput"placeholder="请输入姓名或身份证进行查询"prefix-icon="el-icon-search"><el-buttonslot="append"class="searchbtn"@click="searchput">搜索</el-button></el-input> ...
项目中有一个父子组件,子组件是dialog弹窗,第一次点击保存后,页面自动刷新。 父组件操作的表单数据都丢失了,但是再刷新一次,重新操作就不会刷新了,非常奇怪。 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新。 代码语言:javascript ...