多级表头组件动态修改列，自定义表头添加icon，支持模糊查询下拉多选带table表格分页组件，支持循环组件时间选择器范围不能超出当前日期

置顶

焕想-不怎么回复博客

已于 2022-10-17 15:21:07 修改

阅读量369

点赞数

分类专栏：组件文章标签： vue.js elementui javascript

于 2022-10-12 10:59:48 首次发布

本文链接：https://blog.csdn.net/qq_38815953/article/details/127278490

版权

<template>
   <div class="content">
    <div class="myForm">
      <el-form
        :model="searchForm"
        ref="refForm"
        :label-width="searchConfig.labeWidth"
        :inline="searchConfig.inline">
        <template v-if="searchForm || searchConfig.itemList">
          <el-form-item v-for="(item,index) of searchConfig.itemList" :key="index" :label="item.label" :prop="item.prop" :class="item.type">
            <span v-if="item.type =='text'">{
  {searchForm[item.prop]}}</span>
            <el-input v-if="item.type =='input'" v-model="searchForm[item.prop]" clearable :size="item.size?item.size :'medium'" :disabled="item.disabled" :placeholder="item.placeholder" :style="{width: item.width}"></el-input>
            <el-select clear="select_btn" v-if="item.type =='select'" v-model="searchForm[item.prop]" clearable :size="item.size?item.size :'medium'" :placeholder="item.placeholder" :style="{width: item.width}">
                <el-option v-for="opt of item.option" :key="item.optionControl ? opt[item.optionControl.value] : opt.value" :label="item.optionControl ? opt[item.optionControl.label] : item.label" :value="item.optionControl ? opt[item.optionControl.value] : item.value"></el-option>
            </el-select>
            <!-- 下拉模糊查询多选 -->
            <el-select v-if="item.type =='selectFilter'"  v-model="searchForm[item.prop]"
             :filterable="searchConfig.paginationOption.remote"
             multiple
             :loading="searchConfig.paginationOption.loading"
             :remote="searchConfig.paginationOption.remote"
             :size="item.size?item.size :'medium'"
             clearable
             :style="{width: item.width}"
             :placeholder="item.placeholder">
              <el-option  v-for="opt of item.option" :key="item.optionControl ? opt[item.optionControl.label] : opt.value" :label="item.optionControl ? opt[item.optionControl.label] : item.label" :value="item.optionControl ? opt[item.optionControl.value] : item.value">
              </el-option>
              <pagination
                  v-if="searchConfig.paginationOption.total > 0"
                  small
                  :total="searchConfig.paginationOption.total"
                  :page.sync="searchConfig.paginationOption.pageNum"
                  :limit.sync="searchConfig.paginationOption.pageSize"
                  @pagination = "selectpageNationChange"
                />
            </el-select>
            <el-date-picker v-if="item.type =='datapicker'"
             type="date" 
            :size="item.size?item.size :'medium'" 
            :placeholder="item.placeholder"
             v-model="searchForm[item.prop]" 
             clearable 
             :style="{width: item.width}"  
             format="yyyy-MM-dd"
             :picker-options="item.hasOwnProperty('dayOptions') && item.dayOptions ? item.dayOptions : {//日限制
                disabledDate: (time) => {
                  return   time.getTime() > Date.now() - 8.64e6
                },
              }"
             ></el-date-picker>
            <el-time-picker v-if="item.type =='timepicker'"  
              :size="item.size?item.size :'medium'" 
              :placeholder="item.placeholder" 
              v-model="searchForm[item.prop]" 
              clearable 
              :style="{width: item.width}"></el-time-picker>
           <!-- 时间范围选择 -->
           <el-date-picker
              v-if="item.type === 'datetimerange'"
              key="datetimerange"
              type="datetimerange"
              :size="item.size?item.size :'medium'"
              v-model="searchForm[item.prop]"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              :style="{width: item.width}" 
              :picker-options="item.hasOwnProperty('datetimeOptions') && item.datetimeOptions ? item.datetimeOptions : {//开始-结束时间限制 -带时分秒
                  onPick: ({ maxDate, minDate }) => {
                    searchForm[item.prop]= [];