vue2.0封装element ui 表格上面表单搜索条件的公共组件

可以参考下面的代码，这是一个基于Vue 2.0和Element UI的表格和搜索条件的公共组件：

<template>
  <div>
    <el-form v-if="showFilter" :inline="true" :model="filterForm" class="demo-form-inline">
      <el-form-item v-for="item in filterItems" :label="item.label" :key="item.prop">
        <el-input v-if="item.type === 'input'" v-model="filterForm[item.prop]" :placeholder="item.placeholder"></el-input>
        <el-select v-if="item.type === 'select'" v-model="filterForm[item.prop]" :placeholder="item.placeholder">
          <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="filter">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" :columns="tableColumns" :highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName"
      :row-style="rowStyle" :row-key="rowKey" :header-cell-style="headerCellStyle" :default-sort="defaultSort"
      :show-header="showHeader" :show-summary="showSummary" :sum-text="sumText" :summary-method="summaryMethod"
      :border="border" :stripe="stripe" :size="size" :fit="fit" :empty-text="emptyText" :loading="loading"
      :row-selection="rowSelection" :expand-row-keys="expandRowKeys" :tree-props="treeProps" @row-click="rowClick"
      @row-dblclick="rowDblclick" @current-change="currentChange" @select="select" @select-all="selectAll"
      @selection-change="selectionChange" @cell-mouse-enter="cellMouseEnter" @cell-mouse-leave="cellMouseLeave"
      @cell-click="cellClick" @cell-dblclick="cellDblclick" @header-click="headerClick" @header-contextmenu="headerContextmenu"
      @sort-change="sortChange" @filter-change="filterChange" @expand-change="expandChange" @select-toggle-all="selectToggleAll"
      @select-toggle-row="selectToggleRow" @row-contextmenu="rowContextmenu" @header-dragend="headerDragend"
      @row-dragend="rowDragend" @row-dragenter="rowDragenter" @row-dragleave="rowDragleave" @row-dragover="rowDragover"
      @row-drop="rowDrop" ref="table">
      <slot></slot>
    </el-table>
    <div v-if="showPagination" class="demo-pagination">
      <el-pagination :page-size="pagination.pageSize" :total="pagination.total" :current-page.sync="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableWithFilter',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    tableColumns: {
      type: Array,
      required: true
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          pageSize: 10,
          total: 0,
          currentPage: 1
        }
      }
    },
    filterItems: {
      type: Array,
      default: () => []
    },
    showFilter: {
      type: Boolean,
      default: true
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    highlightCurrentRow: Boolean,
    rowClassName: Function,
    rowStyle: [Object, Function],
    rowKey: [String, Function],
    headerCellStyle: [Object, Function],
    defaultSort: Object,
    showHeader: {
      type: Boolean,
      default: true
    },
    showSummary: Boolean,
    sumText: String,
    summaryMethod: Function,
    border: Boolean,
    stripe: Boolean,
    size: String,
    fit: {
      type: Boolean,
      default: true
    },
    emptyText: String,
    loading: Boolean,
    rowSelection: Object,
    expandRowKeys: Array,
    treeProps: Object
  },
  data() {
    return {
      filterForm: {}
    }
  },
  methods: {
    filter() {
      this.$refs.table.setCurrentRow(null)
      this.$emit('filter', this.filterForm)
    },
    resetFilter() {
      this.filterForm = {}
      this.filter()
    },
    handleSizeChange(val) {
      this.$emit('size-change', val)
    },
    handleCurrentChange(val) {
      this.$emit('current-change', val)
    },
    rowClick(row, column, event) {
      this.$emit('row-click', row, column, event)
    },
    rowDblclick(row, event) {
      this.$emit('row-dblclick', row, event)
    },
    currentChange(currentRow, oldCurrentRow) {
      this.$emit('current-change', currentRow, oldCurrentRow)
    },
    select(selection, row) {
      this.$emit('select', selection, row)
    },
    selectAll(selection) {
      this.$emit('select-all', selection)
    },
    selectionChange(selection) {
      this.$emit('selection-change', selection)
    },
    cellMouseEnter(row, column, cell, event) {
      this.$emit('cell-mouse-enter', row, column, cell, event)
    },
    cellMouseLeave(row, column, cell, event) {
      this.$emit('cell-mouse-leave', row, column, cell, event)
    },
    cellClick(row, column, cell, event) {
      this.$emit('cell-click', row, column, cell, event)
    },
    cellDblclick(row, column, cell, event) {
      this.$emit('cell-dblclick', row, column, cell, event)
    },
    headerClick(column, event) {
      this.$emit('header-click', column, event)
    },
    headerContextmenu(column, event) {
      this.$emit('header-contextmenu', column, event)
    },
    sortChange({ column, prop, order }) {
      this.$emit('sort-change', { column, prop, order })
    },
    filterChange(filters) {
      this.$emit('filter-change', filters)
    },
    expandChange(row, expandedRows) {
      this.$emit('expand-change', row, expandedRows)
    },
    selectToggleAll(selection) {
      this.$emit('select-toggle-all', selection)
    },
    selectToggleRow(row, selected) {
      this.$emit('select-toggle-row', row, selected)
    },
    rowContextmenu(row, event) {
      this.$emit('row-contextmenu', row, event)
    },
    headerDragend(newWidth, oldWidth, column, event) {
      this.$emit('header-dragend', newWidth, oldWidth, column, event)
    },
    rowDragend(newIndex, oldIndex, row, event) {
      this.$emit('row-dragend', newIndex, oldIndex, row, event)
    },
    rowDragenter(dropPosition, drag, event) {
      this.$emit('row-dragenter', dropPosition, drag, event)
    },
    rowDragleave(dropPosition, drag, event) {
      this.$emit('row-dragleave', dropPosition, drag, event)
    },
    rowDragover(dropPosition, drag, event) {
      this.$emit('row-dragover', dropPosition, drag, event)
    },
    rowDrop(dropPosition, drag, event) {
      this.$emit('row-drop', dropPosition, drag, event)
    }
  }
}
</script>

<style scoped>
.demo-form-inline .el-form-item {
  margin-right: 20px;
}
.demo-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

使用方法：

<template>
  <div>
    <table-with-filter :table-data="tableData" :table-columns="tableColumns" :pagination="pagination" :filter-items="filterItems"></table-with-filter>
  </div>
</template>

<script>
import TableWithFilter from '@/components/TableWithFilter'

export default {
  components: {
    TableWithFilter
  },
  data() {
    return {
      tableData: [],
      tableColumns: [{
        prop: 'name',
        label: '名称'
      }, {
        prop: 'age',
        label: '年龄'
      }],
      pagination: {
        pageSize: 10,
        total: 0,
        currentPage: 1
      },
      filterItems: [{
        prop: 'name',
        label: '名称',
        placeholder: '请输入名称',
        type: 'input'
      }, {
        prop: 'age',
        label: '年龄',
        placeholder: '请选择年龄',
        type: 'select',
        options: [{
          label: '18岁以下',
          value: '<=18'
        }, {
          label: '19-30岁',
          value: '19-30'
        }, {
          label: '31岁以上',
          value: '>=31'
        }]
      }]
    }
  },
  methods: {
    fetchData() {
      // 获取数据并更新tableData和pagination.total
    },
    handleFilter(params) {
      // 处理搜索条件
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size
      this.fetchData()
    },
    handleCurrentChange(page) {
      this.pagination.currentPage = page
      this.fetchData()
    }
  }
}
</script>