SearchForm & Table

最新推荐文章于 2024-09-19 11:08:42 发布
最新推荐文章于 2024-09-19 11:08:42 发布
阅读量888 收藏
点赞数
分类专栏： 项目-组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45345105/article/details/112985037
版权
这段代码展示了Vue组件如何实现与API的交互，包括获取产品代码列表、处理搜索表单（cascader、select、input、date-picker）以及展示表格数据。组件使用了axios进行HTTP请求，表单事件处理如change、clear等，并有分页功能。表格组件支持点击行事件，提供自定义操作列。
摘要由CSDN通过智能技术生成

请求

    getProductCodeList() {
        this.getBaseList
        ('erp/service?src=fbxOnline&action=getFbxProductList',
        '产品代码','productCodeList')
    },
    getBaseList(url,name,listName){
        this.axios
        .get(`${url}`)
        .then((res) => {
         console.log(`------------获取 ${name}-------------`);
          console.log(res.data.data);
          if (res.data.isSuccess) {
            this[listName] =
              (res.data.data && res.data.data.length && res.data.data) ||
              this.$message.info(`${name} 没有相关数据`);
          } else {
            this.$message.info(res.data.message);
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },

//新 兼容get post
     getList(isQuery) {
      if (isQuery) {
        this.requestParams.curPage = 1;
      }
      this.getBaseList(
        {
          methods: "post",
          params: {
            chargeType: this.requestParams.chargeType,
            pageNum: this.requestParams.curPage,
            pageSize: this.requestParams.pageSize,
            sectionName: this.requestParams.sectionName,
          },
        },
        "/carrier/chargeSection/getCarrierChargeSectionList",
        "获取线路商计费模板列表",
        "list"
      );
    },
    getBaseList(methods, url, name, listName) {
      this.axios[methods.methods](
        `${url}`,
        methods.params ? methods.params : ""
      )
        .then((res) => {
          console.log(`------------获取 ${name}-------------`);
          console.log(res.data.data);
          if (res.data.code == 200) {
            this[listName] =
              (res.data.data &&
                res.data.data.list.length &&
                res.data.data.list) ||
              this.$message.info(`${name} 没有相关数据`);
            this.requestParams.total = res.data.data.total;
          } else {
            this.$message.info(res.data.message);
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },

vue

在这里插入图片描述

SearchForm

组件源码



<template>
  <div>
    <div :style="searchFromParams.outSideStyle">
      <div
        v-for="(item, index) in searchFromParams.mainSearchList"
        :key="index"
      >
        <div
          v-if="item.type === 'cascader'"
          :style="{
              margin:item.margin ? item.margin : '',
            width: item.divWidth ? item.divWidth : '250px',
            display: 'flex',
            'align-items': 'center',
            'justify-content': 'space-between',
          }"
        >
          <span :style="{ width: item.spanWidth ? item.spanWidth : '80px' }">{{
            item.spanName
          }}</span>
          <el-cascader
            @clear="
              searchFromParams.call(item.event.clear)
                ? item.event.clear($event)
                : null
            "
             clearable
            :placeholder="
              item.placeholder ? item.placeholder : `请选择${item.Name}`"
             v-model="requestParams[item.modelObj.value]"
            :size="item.size ? item.size : ''"
            :options="item.options()"
            :props="item.props"
            @change="item.event.change($event, item.needAutoQuery)"
          >
          <!-- cascader没有clear事件 -->
          </el-cascader>
        </div>
        <div
          v-if="item.type === 'select'"
          :style="{
            width: item.divWidth ? item.divWidth : '250px',
            display: 'flex',
            'align-items': 'center',
            'justify-content': 'space-between',
          }"
        >
          <span :style="{ width: item.spanWidth ? item.spanWidth : '80px' }">{{
            item.spanName
          }}</span>
          <el-select
              :filterable="searchFromParams.call(item.event.filter)
                ? true
                : false"
            :filter-method="searchFromParams.call(item.event.filter)
                ? item.event.filter
                : null"
                 @focus="searchFromParams.call(item.event.focus)
                ? item.event.focus()
                : null"
            :style="{ margin: item.margin, width: item.inputWidth }"
            size="mini"
            
            @clear="
              searchFromParams.call(item.event.clear)
                ? item.event.clear($event)
                : null
            "
            clearable
            v-model="requestParams[item.modelObj.value]"
            @change="item.event.changeProduct($event, item.needAutoQuery)"
          >
            <el-option
              v-for="option in item.list()"
              :key="option[item.selectValue ? item.selectValue : 'value']"
              :label="option[item.selectLabel ? item.selectLabel : 'label']"
              :value="option[item.selectValue ? item.selectValue : 'value']"
            ></el-option>
          </el-select>
        </div>
        <div v-if="item.type === 'input'">
          <el-input
            @clear="
              searchFromParams.call(item.event.clear)
                ? item.event.clear($event)
                : null
            "
            :style="{
              width: item.inputWidth,
              margin: item.margin ? item.margin : '',
            }"
           
            clearable
            v-model="requestParams[item.modelObj.value]"
            :size="item.size ? item.size : ''"
            :placeholder="
              item.placeholder ? item.placeholder : `请输入${item.Name}`
            "
          >
            <template slot="prepend">{{ item.Name }}</template></el-input
          >
        </div>
        <div
          v-if="item.type === 'date-picke'"
          :style="{
            width: item.divWidth ? item.divWidth : '250px',
            display: 'flex',
            'align-items': 'center',
            'justify-content': 'space-between',
          }"
        >
          <span :style="{ width: item.spanWidth ? item.spanWidth : '80px' }">{{
            item.name
          }}</span>
          <el-date-picker
            :style="{
              margin: item.margin ? item.margin : '',
              width: item.inputWidth,
            }"
            @clear="
              searchFromParams.call(item.event.clear)
                ? item.event.clear($event)
                : null
            "
            clearable
            @change="
              searchFromParams.call(item.event.change)
                ? item.event.change($event)
                : null
            "
            :size="item.size ? item.size : ''"
            v-model="requestParams[item.modelObj.value]"
            align="right"
            type="date"
            :placeholder="
              item.placeholder ? item.placeholder : `请输入${item.name}`
            "
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
      </div>
      
      <slot name="btnLeft"></slot>
    </div>
    <div style="margin-top: 20px">
      <slot name="btn"></slot>

    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    searchFromParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    requestParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log(this);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

使用

      <ErpSearchForm
          @getList="getList"
          @openAddDialog="openAddDialog"
          :requestParams="requestParams"
          :searchFromParams="searchFromParams"
        ></ErpSearchForm>
        
        import JiuyuSearchForm from "./jack-components/jiuyu-search-form";

参数

      requestParams: {
         state: null, 
        // base
        pageSize: 20,
        curPage: 1,
        pageSize: 10,
        total: 0,
      },
      searchFromParams: {
        call: (param) => {
          return Object.prototype.toString.call(param) === "[object Function]";
        },
        outSideStyle: {
           // 整个查询整体宽度
          width: "60%",
          display: "flex",
          // 是否换行
          "flex-wrap": "wrap",
          "align-items": "center",
          "pdding-bottom": "20px",
        },
        mainSearchList: [
  
          {
            type: "date-picke",
            size: "mini",
            divWidth: "",
            spanWidth: "110px",
            needAutoQuery: false,
            name: "有效时间",
            modelObj: {
              objName: "requestParams",
              value: "effectivestarttime",
            },
            placeholder: "",

            event: {
              change: (i, autoQuery) => {
                this.requestParams.effectivestarttime = i;
                // autoQuery true的话就change后马上请求
                autoQuery && this.getList();
              },
              clear: () => {
                console.log(123);
                this.getList();
              },
            },
            margin: "0px 10px",
          },
        ],
      },

组件

cascader

          {
            type: "cascader",
            size: "mini",
            spanName: "省市区",
            spanWidth: "60px",
            placeholder: "提货区域",
            divWidth: "",
            needAutoQuery: false,
            props: {
              label: "namec",
              value: "id",
              children: "children",
            },
            modelObj: {
              objName: "requestParams",
              value: "pickUpAddrListIds",
            },
            options: () => {
              return this.pickUpAddrList;
            },
            event: {
              change: (e, autoQuery) => {
              
              },
              clear: (i) => {
                //  cascader没有clear事件
              },
            },
            margin: "10px 20px 10px 0px ",
          },

select

   {
            type: "select",
            divWidth: "",
            needAutoQuery: false,
            selectLabel: "code",
            selectValue: "code",
            spanName: "产品代码",
            spanWidth: "80px",
            modelObj: {
              objName: "requestParams",
              value: "code",
            },
            list: () => {
              return this.productCodeList;
            },
            event: {
              focus: (val) => {
                
              },
              filter: (val) => {
                
              },
              changeProduct: (i, autoQuery) => {},
              clear: (i) => {
                this.getList(1);
              },
            },
            margin: "10px 10px",
          },

input

     {
            type: "input",
            size: "mini",
            inputWidth: "250px",
            needAutoQuery: false,
            Name: "产品名称",
            placeholder: "",
            modelObj: {
              objName: "requestParams",
              value: "name",
            },
            event: {
              clear: (i) => {
                this.getList(1);
              },
            },
            margin: "0 10px 0 0",
          },

date-picke

          {
            type: "date-picke",
            isDatetime: "datetime",
            valueFormat: "yyyy-MM-dd HH:mm",
            size: "mini",
            divWidth: "275px",
            pickerSetTime: true,
            spanWidth: "90px",
            needAutoQuery: false,
            require: true,
            clearable: true,
            name: "有效时间",
            modelObj: {
              objName: "addObject",
              value: "effectiveStartTime",
            },
            placeholder: "",

            event: {
              change: (i, autoQuery) => {},
              clear: () => {
                // console.log(123);
                this.getList();
              },
            },
            margin: "0px 10px",
          },

          {
            type: "date-picke",
            isDatetime: "datetime",
            valueFormat: "yyyy-MM-dd HH:mm",
            size: "mini",
            divWidth: "275px",
            spanWidth: "100px",
            needAutoQuery: false,
            pickerSetTime: true,
            require: true,
            clearable: true,
            name: "失效时间",
            modelObj: {
              objName: "addObject",
              value: "effectiveEndTime",
            },
            placeholder: "",
            event: {
              change: (i, autoQuery) => {
                if (!this.addObject.effectiveStartTime) {
                  this.$message.info("请先选择有效时间");
                  this.addObject.effectiveEndTime = "";
                }
                if (this.addObject.effectiveStartTime < i) {
                } else {
                  this.addObject.effectiveEndTime = "";
                  this.$message.info("失效必须大于有效时间");
                }
              },
              clear: () => {
                this.getList();
              },
            },
            margin: "0px 10px",
          },

Table

组件源码

<!--  -->
<template>
  <div class="">
    <div :style="{'min-width': tabelParams.tabelStyle.minWidth?tabelParams.tabelStyle.minWidth:'',
    'margin':tabelParams.tabelStyle.margin?tabelParams.tabelStyle.margin:''}">
      <el-table
        align="center"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        size="mini"
        highlight-current-row
        :data="tabelParams.datas.tableData()"
        style="width: 100%"
        border
        @row-click="rowClick"
      >
        <el-table-column
          v-for="(item, index) in tabelParams.datas.innerData()"
          :key="index"
          :width="item.width ? item.width : ''"
          :type="item.type ? item.type : ''"
          min-width="130"
          align="center"
          prop="code"
          :label="item.name ? item.name : ''"
        >
          <template slot-scope="scope">
            <!-- 只为序列才显示 -->
            <span v-if="item.type == 'index'" style="margin-left: 10px">{{
              scope.$index + 1
            }}</span>
            <!-- 内容 -->
            <!-- 状态 字段处理 判断是否state，是就渲染 不执行下面代码 -->
            <div
              v-else-if="item.value == 'state' || item.value == 'status'"
              style="margin-left: 10px"
            >
              <span v-if="scope.row[item.value] == 1">草稿</span>
              <span v-if="scope.row[item.value] == 2">发布</span>
              <span v-if="scope.row[item.value] == 3">作废</span>
            </div>
            <!-- 默认展示 -->
            <span v-else style="margin-left: 10px">{{
              (scope.row[item.value] == null ? '-': false) ||
              (scope.row[item.value] ? scope.row[item.value] : "-")
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="!tabelParams.hideOperate"
          :width="tabelParams.operateWidth ? tabelParams.operateWidth:'120px'"
          fixed="right"
          align="center"
          label="操作"
        >
        
          <template slot-scope="scope">
                <slot :row="scope.row"></slot>
          </template>
          
        </el-table-column>
      </el-table>
    </div>
    <div class="block" v-if="!requestParams.hidePage">
      <!-- 分页 -->
      <el-pagination
        style="text-align: right"
        @size-change="tabelParams.event.sizeChange"
        @current-change="tabelParams.event.currentChange"
        :current-page="requestParams.curPage"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :total="requestParams.total"
      ></el-pagination>
    </div>
  
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    innerData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    requestParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    tabelParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  //  @row-click="tabelParams.call(tabelParams.tableEvent.rowClick)
  //             ? tabelParams.tableEvent.rowClick
  //             : null"

  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    rowClick(item) {
      if (
        Object.prototype.toString.call(this.tabelParams.tableEvent.rowClick) ===
        "[object Function]"
      ) {
        this.tabelParams.tableEvent.rowClick(item);
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

使用

      <!-- 表格 -->
      <JiuyuTable :tabelParams="tabelParams" :requestParams="requestParams">
        <!-- 状态 -->
        <template v-slot="row">
          <el-button size="mini" @click="detail(row)">查看</el-button>
          <el-button size="mini" @click="detail(row)">修改</el-button>
          <el-button size="mini" @click="detail(row)">提交</el-button>
        </template>
      </JiuyuTable>

import JiuyuTable from "./jack-components/jiuyu-table";

参数

      requestParams: {
         state: null, 
        // base
        pageSize: 20,
        curPage: 1,
        pageSize: 10,
        total: 0,
      },
 tabelParams: {
        tabelStyle: {
          margin: "10px 0",
          "min-width": "980px",
        },
        hideOperate: false,
        operateWidth:'220px',
        size: "mini",
        datas: {
          tableData: () => {
            return this.list;
          },
          // 表头数据
          innerData: () => {
            return [
              // 需要序号就添加 type
              { name: "序号", value: "", type: "index", width: "60" },
              { name: "产品代码", value: "code" },
              { name: "状态", value: "state" }, //需要特殊处理
              //  <template slot-scope="scope">
              //     <span v-if="scope.row.state == 1">草稿</span>
              //     <span v-if="scope.row.state == 2">发布</span>
              //     <span v-if="scope.row.state == 3">作废</span>
              //   </template>
            ];
          },
        },
        event: {
          sizeChange: (val) => {
            // console.log(this);
            this.requestParams.pageSize = val;
            this.getList();
          },
          currentChange: (val) => {
            this.requestParams.curPage = val;
            this.getList();
          },
        },
        tableEvent: {
          
        },
      },
Jack おう
关注
专栏目录
el-search-table-pagination::dog_face:将Element UI的Form，Table和Pagination组件组合在一起
05-02
元素搜索表分页 将Form，Table和Pagination组件组合在一起。 基于Vue2.x。 您可以使用此包在带有搜索表单和分页的表中显示本地和远程列表数据。安装$ npm i --save el-search-table-pagination演示版请参阅CodePen上...
vue-自定义查询组件
zxw的博客
09-04 2093
在开发后台管理系统的时候，经常会有搜索表单，可以封装组件，提高开发效率 1、封装组件 searchForm组件 ???? 自行替换ui组件（饿了么、蚂蚁），写好会用到的类型，v-if判断符合类型则渲染，双向绑定数据 // searchForm组件 <template> <div v-for="(item, index) in config" :key="index"> <div v-if="item.type === 'input'">
Vue3中搜索表单的二次封装
专注前端技术，包括Web端、移动端、小程序、APP
08-23 1774
经过前两步的封装之后，在使用的SearchForm组件时，简直是爽的不要不要的。{label: '项目名称', prop: 'name', type: 'input'},{label: '项目编码', prop: 'code', type: 'input'},{label: '项目描述', prop: 'desc', type: 'select', list: [{label: '未开始', value: 1}, {label: '已开始', value: 2}]},
一张图解析FastAdmin中的表格列表（bootstrap-table）的功能（备份）
最新发布
向宇
09-19 2207
请根据图片上的数字索引查看对应功能说明。1.菜单名称和描述 默认生成的CRUD是没有菜单名称和描述显示的，如果需要显示则可以修改->，给对应菜单的添加上备注信息后即可显示，支持HTML2.TAB过滤选项卡 在一键生成CRUD时，如果表中存在字段且为类型，则会生成相应的TAB过滤选项卡，如果需要生成其它字段的过滤选项卡则可以在使用时使用来指定字段3.通用搜索 通用搜索的的内容是根据配置的字段决定的，渲染的内容及格式由FastAdmin自动进行渲染，如果需要禁用或删除某一选项，可以在JS中配置来删除通用搜索中的
易优CMS:searchform的基础用法
Jessicawh的博客
11-15 672
【基础用法】 名称：searchform 功能：文档标题搜索，默认搜索整站 语法： {eyou:searchform type=‘default’} {$field.hidden} {/eyou:searchform} 参数： type=‘default’ 默认搜索方式，目前暂时只有default； typeid=’’ 默认搜索所有栏目的文档标题，也可以指定栏目id针对某个栏目搜索； ch...
vue3.0+ts+antdesginVue 表格上方搜索条件（新增 搜索 重置 收起展开）的封装
我只是个很菜的前端
06-23 2455
vue3.0+ts+antdesginVue 表格上方搜索条件（新增 搜索 重置 收起展开）的封装
易优cms searchform 搜索标签使用方法
eyoucms的博客
03-08 965
------------------------------示例1---------------------------------------------------------------示例2---------------------------------------------------------------示例3--------------------------------描述：指定产品模型搜索。
Bootstrap table分页问题汇总
09-02
在某些情况下，使用Bootstrap Table时，服务器端可能无法通过 `request.form` 获取到传来的参数。这通常是由于 AJAX 请求配置不当导致的。解决这个问题的方法有两种： 1. 使用读流文件处理请求。 2. 如果你想继续...
element UI封装form、search
11-10
1.封装form表单，根据动态组件特性，兼容多种选项的表单 2.封装search，搜索组件，同样兼容多种选项，可增加，包含搜索、重置；默认展示行数，展开、收起展示 3.封装table，表单展示包含输入项、展示方式，包含列...
Search-Table:HTMLCSSJS搜索表
03-25
<form id="search-form"> <input type="text" id="search-input" placeholder="搜索..."> 搜索 </form> <table id="search-table"> 列1 列2 列3 <!-- 表格数据行 --> </table> ``` **CSS（层叠...
vue3自定义组件+table列表+dialog弹窗+search查询组件+form表单
07-22
vue3自定义组件 table列表+dialog弹窗+search查询组件+select查询 <el-table ref="tableRef" v-loading="tableLoading" element-loading-text="数据加载中..." :border="border" :data="tableData" :row-class-name=...
Vue3.0使用Element-ui制作searchForm组件
Cocoon_Xu的博客
02-19 749
然后就是组件的调用了。
vue2 SearchForm组件 表单查询
weixin_43845137的博客
03-28 797
【代码】vue2 SearchForm组件 表单查询。
searchform.php,get_search_form()函数
weixin_42151599的博客
03-17 496
get_search_form 函数在 WordPress 中是用来提取预设的搜索表单或者默认的搜索表单的。语法结构参数$echo 布尔型，参数是可选的，如果是true则显示表单，如果是false则会返回一个字符串，默认是true。实例如果主题目录里没有searchform.php这个文件，那么WordPress将默认使用内置的搜索表单，其格式为Search for:如果主题文件里有searchf...
searchform
如鹿渴慕泉水的专栏
11-09 2229
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Tex
vue antd 自定义搜索筛选栏组件封装
weixin_46656983的博客
04-01 5081
这里写自定义目录标题1、背景2、分析3、实现（1）form表单组件（searchForm.vue）示例代码：（2）formItem表单项组件（formItem.vue）示例代码：4、关键点5、参数配置项解释（1）示例：（2）参数传递解析的流程：（3）特殊情况的处理6、按钮组7、使用方式示例8、完整代码（1）searchForm.vue（2）formItem.vue依赖引入的一些函数方法 tools.js 1、背景 vue后台管理系统，会有很多表格页面，表格上方会有一些搜索选项。表格直接使用a-table即可
vue elementui 表格搜索筛选栏组件封装
热门推荐
醉逍遥neo的博客
01-19 1万+
1、背景 vue后台管理系统，会有很多表格页面，表格上方会有一些搜索选项，表格直接使用el-table即可，而搜索栏区域每次写起来都很繁琐，而且多人开发情况下每个人写的样式都不相同，布局样式无法统一。 所以要考虑对搜索栏做一个封装，统一配置引用，提升开发维护效率和界面统一。 完成后的效果大概就是长这样： 2、分析 项目使用的是elementui框架，搜索栏这种表单提交，首先要使用el-form组...
React+hook+ts+ant design封装一个input和select搜索的组件
qq_41632427的博客
10-14 2030
React+hook+ts+ant design封装一个input和select搜索的组件
怎样在一个form里放两个submit按钮，按了以后分别提交到不同的程序
weixin_30326745的博客
07-11 230
以下两个实例都经过测试，保证能够正常使用。 注意：google站内搜索代码中method="get"，本文全部采用了get方式提交。也可以在js代码中对提交方式进行处理（实例略）。 实例一： <script language="javascript"> function chkForm(frm) { if (frm.q.value=="" || frm.q.value=...
Element UI封装组件实现动态form、search与table定制功能
- super-form、super-search、super-table 分别对应封装后的表单、搜索和表格组件，它们可能包含了上述封装的所有功能。 - popover-tree-select、popover-select 可能是封装了带有弹出层树形选择器和下拉选择器的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值