vue+el-table+搜索封装

<template>
  <div>
    <!-- 搜索栏 -->
    <el-form
      v-if="formList.length > 0"
      :inline="true"
      :model="searchDataClone"
      label-width="95px"
      ref="searchDataClone"
      class="demo-form-inline device-wrapper"
    >
      <el-form-item v-for="f in formList" :key="f.prop" :label="f.label" :prop="f.prop">
        <template>
          <template v-if="f.type === 'input'">
            <el-input clearable v-model.trim="searchDataClone[f.prop]" size="small" :placeholder="'请输入'+f.label"></el-input>
          </template>
          <template v-else-if="f.type === 'company'">
            <el-select size="small" clearable  v-model="searchDataClone[f.prop]" :placeholder="'请输入'+f.label">
              <el-option label="不限" value v-if="f.selectAuto"></el-option>
              <el-option
                v-for="(s, i) in InsCompanyList"
                :key="i"
                :label="s.name"
                :value="s.id"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="f.type === 'select'">
            <el-select size="small" clearable  v-model="searchDataClone[f.prop]" :placeholder="'请输入'+f.label">
              <el-option label="不限" value v-if="f.selectAuto"></el-option>
              <el-option
                v-for="(s, i) in f.options"
                :key="i"
                :label="s.label"
                :value="s.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="f.type === 'datePicker'">
            <!-- 日期区间 -->
            <el-date-picker
              v-if="f.dateType === 'daterange'"
              type="daterange"
              size="small"
              v-model="searchDataClone[f.prop]"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              :clearable="true"
            ></el-date-picker>
            <!-- 一天 -->
            <el-date-picker
              v-if="f.dateType === 'date'"
              type="date"
              size="small"
              v-model="searchDataClone[f.prop]"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </template>
          <template v-else-if="f.type === 'radio'">
            <el-radio-group v-model="searchDataClone[f.prop]" :placeholder="'请输入'+f.label">
                <el-radio  v-for="(r, i) in f.radioList" :key="i" :label="r.value" >{{r.label}}</el-radio>
              </el-radio-group>
          </template>
        </template>
      </el-form-item>
      
      
      <el-form-item>
        <el-button style="margin-left:30px" size="small" @click="resetForm('searchDataClone')">重置</el-button>
        <el-button type="primary" size="small" @click="handleSearchList()">查询</el-button>
        <template v-if="btnGroup.length>0">
          <span v-for="(val, idx) in btnGroup" :key="idx"  style="margin-left:10px">
            <slot v-if="val.slot" show-overflow-tooltip :name="val.name"></slot>
            <el-button v-else :type="val.type || 'primary'" size="small" @click="val.click()">{{ val.name }}</el-button>
          </span>
      </template>
      </el-form-item>
      <!-- <el-form-item v-if="btnGroup.length>0" >
            <el-button v-for="(val, idx) in btnGroup" :key="idx" :type="val.type || 'primary'" size="small" @click="tabFun(val)">{{ val.name }}</el-button>
      </el-form-item> -->
    </el-form>

      <!--表格-->
    
      <el-table 
        :data="data"  
        border
        size="small"
        style="width: 100%" 
        v-loading="tableConfig.loading" 
        element-loading-text="数据加载中" 
        element-loading-spinner="el-icon-loading" 
        @selection-change="handleSelectionChange"
        :row-style="{ height: '55px' }"
        :cell-style="{ padding: '0px' }"
        :header-cell-style="{ background: '#F2F7FC', fontWeight: '700', color: '#606266' }"
        :cell-class-name="rowClass"
        >
            <el-table-column type="selection" :width="tableConfig.selectionWidth || '50'" v-if="tableConfig.isCheckBox" align="center" />
            <el-table-column type="index" :width="tableConfig.indexWidth || '50'" v-if="tableConfig.isShowIndex" align="center" label="序号" />
            <template v-for="(item,index) in tableConfig.columns">
                <!-- 日期内容 -->
                <el-table-column v-if="item.type ==='date'" :align="'center'" :fixed="item.fixed" :width="item.width || 150"   show-overflow-tooltip :label="item.label"   :key="item.prop" >
                    <template slot-scope="scope">
                        <div>{{ scope.row[item.prop] | formateDate }}</div>
                    </template>
                </el-table-column>
                <el-table-column v-if="item.type === 'statMap'"  :align="'center'"  :width="item.width || ''"  :fixed="item.fixed" show-overflow-tooltip :label="item.label"  :key="item.prop"  :prop="item.prop">
                    <template slot-scope="scope">
                    <span>  {{ statMaps(item.options)[scope.row[item.prop]] || '--' }}</span>
                    </template>
                </el-table-column>
                <!-- 自定义内容 -->
                <slot v-if="item.type ==='slot'" show-overflow-tooltip :name="item.name"></slot>
                <!-- 常规文本内容 -->
                <el-table-column v-if="item.type ==='text'" :align="'center'"  :width="item.width || ''"  :fixed="item.fixed"  :label="item.label"  :key="item.prop"  :prop="item.prop"></el-table-column>

            </template>
            <!-- <slot name="operate" :row="scope.row"></slot> -->
            <!-- 自定义操作栏 -->
            <el-table-column v-if="tableConfig.operateShow " label="操作" align="center" :min-width="tableConfig.operationWidth || '100'"  fixed="right">
                <template slot-scope="scope">
                <slot name="operate" :row="scope.row"></slot>
                </template>
            </el-table-column>  
            <!-- 数组形式的操作栏，用于普通按钮 -->
            <!-- // optBtns:[
            //   {
            //     type:'primary',
            //     label:'修改',
            //     hide:(row) => {
            //      return row.importStatus == 1?true:false
            //     },
            //     click:(row, index) => {return this.modifyFun(row)},
            //   }
            // ] -->
            <el-table-column v-if="tableConfig.optBtns" :min-width="tableConfig.operationWidth || '100'" label="操作" fixed="right"   header-align="center" align="center" >
                <template slot-scope="scope">
                    <span v-for="(btn, index) in tableConfig.optBtns" :key="index">
                        <el-button style="margin:0 10px" v-if="!btn.hide  ||(btn.hide &&btn.hide(scope.row))"  v-permission="btn.perm"    @click="btn.click(scope.row, index)" :type="btn.type ||'primary'" :icon="btn.icon" size="small">{{ btn.label }} </el-button>                   
                   </span>
                </template>
              </el-table-column>

        </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
            v-if="tableConfig.isPaginationShow && pagination.totalSize"
            style="margin-top: 10px"
            :page-size="pagination.pageSize"
            :current-page.sync="pagination.pageNum"
            :total="pagination.totalSize"
            layout="total, sizes,prev, pager, next,jumper"
            :page-sizes="[10, 20, 50, 100]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
  </div>
</template>
  
  <script type="text/ecmascript-6">

export default {
  props: {
    formList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    btnGroup: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableConfig: {
      type: Object,
      default: () => {
        return {};
      }
    },
    searchDataClone: {
      type: Object,
      default: () => {
        return {};
      }
    },
    pagination: {
        type: Object,
        default: () => ({
            pageNum: 1,
            pageSize: 10,
            totalSize: 0,
        }),
    },
    rowClass:{
        type: Function,
        default: ()=>'',
    },
    data:{
        type:Array,
        default:()=> []
    },
  },
  data() {
    return {
      InsCompanyList:[]
    };
  },
  created() {
    this.companyFun()
  },
  filters: {
        formateDate(val) {
            return formatDateTime(val)
        }
    },
  methods: {
    formatDateTime(date) {
      let d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();
      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;
      return [year, month, day].join('-');
    },
    companyFun(){
       this.$api.cost.gainTopList().then(res => {
          if (res.data) {
              this.InsCompanyList = res.data;
          }
      });
        },
    statMaps(list) {
      if (!list) return;
      let obj = {};
      list.forEach(item => {
        obj[item.value || item.id] = item.label || item.value;
      });
      return obj;
    },
    // 表格多选
    handleSelectionChange(currentRow) {
        this.$emit('selectionChange', currentRow);
    },

    handleSizeChange(value) {
        this.pagination.pageSize = value;
        this.$emit('getList');
    },
    handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.$emit('getList');
    },
    // 搜索
    handleSearchList() {
      // 更新父组件searchData
      this.pagination.pageNum = 1;
      this.pagination.pageSize = 10;
      this.$emit("handleSearchList", this.searchDataClone);
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.handleSearchList();
    },
    handleOpt(row,index) {
        this.$emit('handleOpt', row, index)
    },
  }
};
</script>