1. 使用形式: 表格組件 x-table 使用時盡量看一下源碼再使用

// 并不完善 有待繼續(xù)開發(fā)
x-table(
  :loading='loading'  // Table加載
  :columns='columns'  // 表格配置數(shù)據(jù)
  :data='featchData'  // 接口返回數(shù)據(jù)
  :immediately='false'// 是否立即執(zhí)行 默認為true
  :pageSizes='[20]'   // 動態(tài)修改 pageSizes 默認為 [10, 20, 50, 100]
  @search='onFeatchData' // 查詢數(shù)據(jù)事件
)
  <!-- 此處為iview表格自定義模版行為 -->
  template(slot-scope="{ row, index }" slot="actions")
    Button(type="primary" size="small" style="margin-right: 5px" @click="show(index)") View
    Button(type="error" size="small" @click="remove(index)") Delete

2. 表格組件 - 配置文件 columns.js

<!-- 配置文件 -->
|—— key   對應(yīng)數(shù)據(jù)展示字段
|—— title 展示內(nèi)容
|—— width 表格寬度
|—— isHideColumn 為在表格中隱藏該列展示
|—— query 查詢表單配置
  |—— form: 'select' 表單類型
  |—— defaultValue: 0 默認值
  |—— clearable: false 是否顯示清空所有 默認為true
  |—— options 選項配置
|—— children 子級數(shù)據(jù)

export default [
  {
    key: 'card_type',
    title: '卡類型',
    isHideColumn: true,
    query: {
      form: 'select',
      defaultValue: 0,
      clearable: false,
      options: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '實體卡',
          value: 2
        },
        {
          label: '電子卡',
          value: 3
        },
      ]
    },
  },
  {
    key: 'query_date',
    title: '時間',
    isHideColumn: true,
    query: {
      form: 'date',
      defaultValue: new Date(),
      clearable: false,
    },
  },
  {
    key: 'window_date',
    title: '窗口期',
    isHideColumn: true,
    query: {
      form: 'select',
      defaultValue: 0,
      clearable: false,
      options: [
        {
          label: '0天',
          value: 0
        },
        {
          label: '3天',
          value: 3
        },
        {
          label: '7天',
          value: 7
        },
        {
          label: '15天',
          value: 15
        },
        {
          label: '30天',
          value: 30
        },
      ]
    },
  },
  {
    key: 'ad_id',
    title: '計劃ID',
    width: 200,
    query: {
      form: 'input',
    }
  },
  {
    key: 'dt',
    title: '日期',
  },
  {
    key: 'sold_unused_cnt',
    title: '包含子元素',
    children: [
      {
        key: 'total_income',
        title: '總收入',
      },
      {
        key: 'card_income',
        title: '售卡收入',
      },
    ]
  },
  {
    key: 'actions',
    title: '操作',
    width: 160,
    <!-- 需定義slot類型 對應(yīng)第12行解釋 -->
    slot: 'actions'
  },
]

3. 源碼

<template lang="pug">
.x-table
  //- 表單組件
  .form-box.main(v-if='dynamicQueryList.length > 0')
    //- 動態(tài)渲染各表單組件
    .query-box
      .query(v-for='i in dynamicQueryList' :key='i.key')
        //- Title
        .title {{ i.title }}:
        //- 日期時間組件
        DatePicker.form-item(
          v-if='i.query.form === "date"'
          v-model='form[i.key]'
          :class="i.query.type || 'date'"
          :type="i.query.type || 'date'"
          :format='i.query.format || "yyyy-MM-dd"'
          :placeholder='`請選擇${i.placeholder || i.title}`'
          :clearable='i.query.clearable !== undefined ? i.query.clearable : true'
        )
        //- 下拉選擇組件
        Select.form-item(
          v-else-if='i.query.form === "select"'
          v-model='form[i.key]'
          :placeholder='`請選擇${i.placeholder || i.title}`'
          :clearable='i.query.clearable !== undefined ? i.query.clearable : true'
          @clear='form[i.key] = null'
          :filterable='i.query.filterable'
        )
          Option(
            v-for='item in i.query.options'
            :key='item.value'
            :label='item.label'
            :value='item.value'
          )
        //- 輸入框組件
        Input.form-item(
          v-else
          v-model='form[i.key]'
          :placeholder='`請輸入${i.placeholder || i.title}`'
          :clearable='i.query.clearable !== undefined ? i.query.clearable : true'
        )
    //- 操作組件
    .actions-box
      .action_btn
        Button(@click='handleSearch' type='primary') 查詢
        Button(@click='handleReset') 重置
      //- 其他操作插槽
      slot(name='action' :form='form')
  //- 表格分頁組件
  .table-box.main
    //- 頭部slot
    slot(name='header')
    //- 表格組件
    Table(border :loading='loading' :columns='columnsComputed' :data='data.list || []')
      template(v-for='column in columnsSlotComputed' :slot='column.slot' slot-scope='params')
        slot(:name='column.slot' v-bind='params')
    //- 分頁組件
    Page.pagination(
      v-if='data.total'
      show-total
      show-elevator
      show-sizer
      :total='data.total'
      :current='option.page'
      :page-size='option.pageSize'
      :page-size-opts='option.pageSizes'
      @on-change='handlePageChange'
      @on-page-size-change='handlePageSizeChange'
    )
    //- 底部slot
    slot(name='footer')
</template>

<script>
export default {
  name: 'x-table',
  props: {
    loading: { // Table加載
      type: Boolean,
      default: false
    },
    columns: Array, // 配置表格數(shù)據(jù)
    data: {
      type: Object,
      default: () => {
        return {
          list: [], // 數(shù)據(jù)列表
          total: 0 // 數(shù)據(jù)總量
        }
      }
    }, // 展示數(shù)據(jù)
    immediately: { // 是否立即執(zhí)行
      type: Boolean,
      default: true
    },
    pageSizes: { // pageSizes 動態(tài)配置
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      // 檢索表單綁定
      form: {},
      // 檢索表單列表數(shù)據(jù)
      dynamicQueryList: [],
      option: {
        page: 1, // 當前展示頁碼
        pageSize: 20, // 每頁展示數(shù)量
        pageSizes: [10, 20, 50, 100] // 每頁顯示個數(shù)選擇器的選項設(shè)置
      }
    }
  },
  created () {
    // 設(shè)置檢索數(shù)據(jù)
    this.setQuery()
    // 修改PageSizes配置
    if (this.pageSizes.length) {
      this.option.pageSizes = this.pageSizes
      this.option.pageSize = this.pageSizes[0]
    }
  },
  computed: {
    // 計算隱藏列展示項
    columnsComputed () {
      return this.columns.filter(i => !i.isHideColumn)
    },
    // 計算存在slot展示項
    columnsSlotComputed () {
      return this.columns.filter(i => !!i.slot)
    }
  },
  methods: {
    // 設(shè)置檢索數(shù)據(jù)
    setQuery () {
      // 表單映射
      this.columns.forEach(column => {
        if (column.query) {
          this.dynamicQueryList.push(column) // 保存表單查詢元素配置
          const defaultValue = column.query.defaultValue === undefined ? null : column.query.defaultValue // 獲取初始值
          this.$set(this.form, column.key, defaultValue) // 動態(tài)設(shè)置query
        }
      })
      // 立即執(zhí)行獲取數(shù)據(jù)
      this.immediately && this.handleSearch()
    },
    // 重置數(shù)據(jù)
    handleReset () {
      this.dynamicQueryList.forEach(item => {
        this.form[item.key] = item.query.defaultValue === undefined ? null : item.query.defaultValue
      })
      this.handleSearch()
    },
    // 查詢數(shù)據(jù)
    handleSearch () {
      const { page, pageSize } = this.option
      // 查詢參數(shù)以及分頁參數(shù)
      const query = {
        form: this.form,
        option: {
          page,
          pageSize
        }
      }
      this.$emit('search', query)
    },
    // 頁碼改變的回調(diào)，返回改變后的頁碼
    handlePageChange (page) {
      this.option.page = page
      this.handleSearch()
    },
    // 切換每頁條數(shù)時的回調(diào)，返回切換后的每頁條數(shù)
    handlePageSizeChange (pageSize) {
      this.option.pageSize = pageSize
      this.handleSearch()
    }
  }
}
</script>

<style scoped lang="less">
.x-table {
  .form-box {
    margin-bottom: 20px;
  }
  .query-box {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    .query {
      display: flex;
      align-items: center;
      margin: 0 20px 14px 0;
      .form-item {
        width: 180px;
        margin-left: 10px;
      }
      .daterange {
        width: 200px;
      }
      .datetimerange {
        width: 320px;
      }
    }
  }
  .actions-box {
    button {
      margin-right: 10px;
    }
  }

  .pagination {
    margin-top: 14px;
  }
}
</style>