smsb-web-develop/src/components/table/Table/index.vue

<template>
  <div
    v-loading="options.loading"
    class="l-flex__auto l-flex--col c-table"
    :class="{ 'prevent-copy': preventCopy }"
  >
    <div
      v-if="hasHeader"
      class="l-flex__none c-table__header"
    >
      <slot
        name="header"
        :condition="options.params"
        :total-count="options.totalCount"
      />
      <template v-if="buttons">
        <button
          v-for="(button, index) in buttons"
          :key="index"
          class="o-button"
          @click="onClickButton(button)"
        >
          <i
            v-if="button.icon"
            class="o-button__icon"
            :class="button.icon"
          />
          {{ button.label }}
        </button>
      </template>
      <div
        v-if="filters"
        class="l-flex__fill c-table__filters"
      >
        <div
          v-for="filter in filters"
          :key="filter.key"
          class="l-flex--row"
        >
          <schema-select
            v-if="filter.type === 'select'"
            v-model="options.params[filter.key]"
            :class="{ 'o-select': !filter.remote || filter.simple }"
            :schema="filter"
            @change="onChange"
          />
          <template v-if="filter.type === 'switch'">
            <span class="c-sibling-item">{{ filter.placeholder }}</span>
            <el-switch
              v-model="options.params[filter.key]"
              class="c-sibling-item"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="onChange"
            />
          </template>
          <template v-if="filter.type === 'search'">
            <search-input
              v-model.trim="options.params[filter.key]"
              class="c-sibling-item"
              :placeholder="filter.placeholder"
              @search="onChange"
            />
            <button
              class="c-sibling-item o-button"
              @click="onChange"
            >
              搜索
            </button>
          </template>
        </div>
      </div>
    </div>
    <el-table
      ref="table"
      class="l-flex__self l-flex--col c-table__main"
      :class="{ 'with-content': tableData.length }"
      :data="tableData"
      v-bind="tableProps"
      v-on="$listeners"
    >
      <schema-table-column
        v-for="(col, index) in cols"
        :key="index"
        :schema="col"
      />
      <status-wrapper
        slot="empty"
        :error="options.error"
        @click="onPagination"
      />
    </el-table>
    <slot
      v-if="isNeedPagination"
      name="pagination"
      :options="options"
      :pagination="onPagination"
    >
      <pagination
        :total="options.totalCount"
        :page.sync="options.params.pageNum"
        :limit.sync="options.params.pageSize"
        v-bind="paginationConfig"
        @pagination="onPagination"
      />
    </slot>
    <slot />
  </div>
</template>

<script>
import tableMixin from '../mixins/table'
import SchemaTableColumn from './Column'

export default {
  name: 'SchemaTable',
  components: {
    SchemaTableColumn
  },
  mixins: [tableMixin],
  computed: {
    tableProps () {
      return {
        ...this.$attrs,
        ...this.schema.props
      }
    },
    pageSize () {
      return this.schema.pageSize || 10
    },
    preventCopy () {
      return !!this.$listeners['row-dblclick']
    },
    cols () {
      return this.schema.cols.filter(Boolean)
    }
  }
}
</script>