筛选表格数据

<template>
  <div class="ces-search searchContent">
    <el-form :size="size" :inline="true" :label-width="labelWidth">
      <el-form-item v-for='item in searchForm' :label="item.label" :key='item.prop' style="float: left">
        <!-- 输入框 -->
        <el-input v-if="item.type==='Input'" v-model="searchData[item.prop]" size="mini" :placeholder="item.placeholder" clearable class="input40" ></el-input>
        <!-- 下拉框 -->
        <!--<el-select v-if="item.type==='Select'" v-model="searchData[item.prop]" size="mini" @change="item.change(searchData[item.prop])" :placeholder="item.placeholder" clearable>
            <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
        </el-select>-->
        <el-select v-if="item.type==='Select'" v-model="searchData[item.prop]" size="mini" :placeholder="item.placeholder" clearable>
          <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
        </el-select>
        <!-- 单选 -->
        <el-radio-group v-if="item.type==='Radio'" v-model="searchData[item.prop]">
          <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>
        </el-radio-group>
        <!-- 单选按钮 -->
        <el-radio-group v-if="item.type==='RadioButton'" v-model="searchData[item.prop]" @change="item.change && item.change(searchData[item.prop])">
          <el-radio-button v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio-button>
        </el-radio-group>
        <!-- 复选框 -->
        <el-checkbox-group v-if="item.type==='Checkbox'" v-model="searchData[item.prop]" >
          <el-checkbox v-for="ch in item.checkboxs" :label="ch.value" :key="ch.value">{{ch.label}}</el-checkbox>
        </el-checkbox-group>
        <!-- 日期 -->
        <el-date-picker v-if="item.type==='Date'" v-model="searchData[item.prop]" :placeholder="item.placeholder" clearable ></el-date-picker>
        <!-- 时间 -->
        <el-time-select v-if="item.type==='Time'" v-model="searchData[item.prop]" type=''></el-time-select>
        <!-- 日期时间 -->
        <el-date-picker v-if="item.type==='DateTime'" type='datetime' v-model="searchData[item.prop]" :disabled="item.disable && item.disable(searchData[item.prop])"></el-date-picker>
        <!-- 滑块 -->
        <!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->
        <!-- 开关 -->
        <el-switch v-if="item.type==='Switch'" v-model="searchData[item.prop]" ></el-switch>
      </el-form-item>
      <el-form-item v-for='item in searchHandle' :key="item.label" style="float: left">
        <el-button :type="item.type" :size="item.size || size" @click='item.handle()' :icon="item.icon" style="background: #009688;margin-left:15px;height: 40px;" >{{item.label}}</el-button>
      </el-form-item>
    </el-form>
    <!--<el-form inline v-if='isHandle'>
        <el-form-item v-for='item in searchHandle' :key="item.label">
            <el-button :type="item.type" :size="item.size || size" @click='item.handle()' :icon="item.icon" style="background: #009688;margin-left:15px;" >{{item.label}}</el-button>
        </el-form-item>
    </el-form>-->
  </div>
</template>

<script>
    export default {
      name: "searchForm",
      props:{
        isHandle:{
          type:Boolean,
          default:true
        },
        labelWidth:{
          type:String,
          default:'100px'
        },
        size:{
          type:String,
          default:'medium'
        },
        searchForm:{
          type:Array,
          default:[]
        },
        searchHandle:{
          type:Array,
          default:()=>[]
        },
        searchData:{
          type:Object,
          default:{}
        }
      },
      data () {
        return {
        };
      },
    }
</script>

<style>
  .searchContent {
    margin: 10px 0 20px 0;
    display: flex;
    flex-direction: row;
  }
  .el-input--suffix {
    width: 200px;
    margin-right: 20px;
  }
  .input40 input {
    height: 40px !important;
  }
</style>

使用：

<template>
  <div class="ces-main">
    <search-com
      size='medium '
      labelWidth = '80px'
      :searchData = "searchData"
      :searchForm = "searchForm"
      :searchHandle="searchHandle"
    ></search-com>
    <table-com
      :that='that'
      size='small '
      :isSelection='true'
      :isIndex='true'
      :isHandle='true'
      :tableData='tableData'
      :tableCols='tableCols'
      :newBtnList="newBtnList"
      :isPagination='true'
      :tablePage='pagination'
      :longDatas="longDatas"
    >
    </table-com>

  </div>
</template>

<script>
  import tableCom from '../../components/tableCompnment/tableForm'
  import searchCom from '../../components/tableCompnment/searchForm'
  export default {
    components : {
      tableCom,searchCom
    },
    data () {
      return {
        that : this,
        // 查询表单
        searchData:{
          carNumber:null,
        },
        searchForm:[//搜索栏
          {type:'Input',prop:'carNumber','180px',placeholder:'请输入车牌'},
        ],
        searchHandle:[//搜索按钮
          {label:'查询',icon:"el-icon-search",type:'primary',handle:()=>this.searchNews()},
        ],
        tableData : [
          {id:1,carNumber:'粤B555'},
          {id:2,carNumber:'粤B555'},
          {id:3,carNumber:'粤B555'},],// 表格数据
        tableCols:[// 表头
          {label:'车牌',prop:'carNumber'},
          {label:'车辆信息',type:'longData'},
          {label:'下单时间',prop:'inputTime'},
          {label:'业务类型',prop:'checkType'},
          {label:'故障描述',prop:'note'},
          {label:'发动机缸数量',prop:'carCylinder'},
          {label:'当前操作人',prop:'operatorName'},
          {label:'操作',type:'button',},
          {label:'冻结',type:'Button',btnList:[
              {type:'danger',label:'冻结工单',handle:(row,that)=>this.showRecord(row,that)},
            ]},
        ],
        newBtnList:[
          {id : 1,btnList:[
              {type:'primary',label:'上传照片',isShow:true, handle:(row,that)=>this.showEditTest(row,that)},
              {type:'success',label:'完成',isShow:false, handle:row=>''}
            ]
          },
          {id : 2,btnList:[
              {type:'primary',label:'上传照片',isShow:true, handle:(row,that)=>this.showEditTest(row,that)},
              {type:'success',label:'完成',isShow:true, handle:row=>''}
            ]
          },
          {id : 3,btnList:[
              {type:'primary',label:'上传照片',isShow:true, handle:(row,that)=>this.showEditTest(row,that)},
              {type:'success',label:'完成',isShow:true, handle:row=>''}
            ]
          }
        ],


        longDatas : [],
        pagination:{//页数...
          pageSize:10,
          pageNum:1,
          total:0
        },
        orderPageShowOrgName: false,
      }
    },
  }
</script>

<style>
</style>

效果：