JxlTable 表格

满足开发者采用配置的方式，快速搭建表格数据的需求。

基于 ElementUI 的 el-table 、el-table-column、el-pagination、el-button、el-row 和 el-col 标签封装。
基于自封组件的 jxl-tip 标签封装。

<template>
  <div class="el-table-wrapper">
    <div class="el-table-body">
      <el-table
        v-loading="loading"
        row-key="id"
        :data="dataPage"
        :border="border"
        :highlight-current-row="getRowType() === 'radio'"
        :class="isAutoLayout ? 'auto-layout': ''"
        v-bind="$attrs"
        v-on="$listeners"
        @current-change="currentChange"
        @expand-change="expandChange"
        @selection-change="selectionChange"
      >
        <!-- 表格下方追加内容 -->
        <template slot="append">
          <slot name="table-append" />
        </template>
        <!-- 表格没有数据时显示的内容 -->
        <template slot="empty">
          <slot name="table-empty" />
        </template>
        <!-- 表格扩展行，显示额外的数据 -->
        <template v-if="$scopedSlots['row-expand']">
          <el-table-column type="expand">
            <template v-slot="{row, $index}">
              <slot name="row-expand" :row="row" :index="$index + 1" />
            </template>
          </el-table-column>
        </template>
        <!-- 选择列 -->
        <el-table-column v-if="getRowType() === 'checkbox'" type="selection" width="80" />
        <template v-for="(item, key) in columns">
          <!-- 隐藏列 -->
          <template v-if="isHidden(item)" />
          <!-- 正常列 -->
          <el-table-column
            v-else
            :key="key"
            :fixed="item.fixed"
            :prop="item.prop"
            :min-width="getMinWidth(item)"
            :width="isActions(item) ? getActionWidth(item) : getWidth(item)"
            :align="getAlign(item)"
            :header-align="getHeaderAlign(item)"
            v-bind="insertAttrs(item)"
          >
            <template slot="header">
              <!-- 表头名称 -->
              <span>{{ item.label }}</span>
              <!--条目提示符-->
              <jxl-tip v-if="item.tip" :options="item.tip">
                <template v-if="_get(item, 'tip.prompt.content.slotName')" v-slot:content>
                  <slot v-if="$scopedSlots['tipContent']" name="tipContent" :row="item" />
                </template>
              </jxl-tip>
            </template>
            <template v-slot="{row, $index}">
              <!-- 插槽渲染 -->
              <slot v-if="item.slot === true && $scopedSlots[item.prop]" :name="item.prop" :row="row" :index="$index + 1" />
              <slot v-else-if="_typeof(item.slotName) === String && $scopedSlots[item.slotName]" :name="item.slotName" :row="row" :index="$index + 1" />
              <!-- 方法渲染 -->
              <template v-else-if="typeof item.render === 'function'">{{ item.render(row, $index + 1) }}</template>
              <!-- 序号渲染 -->
              <template v-else-if="item.type === 'index' || item.prop === 'index'">{{ $index + 1 }}</template>
              <!-- 操作按钮 -->
              <template v-else-if="isActions(item)">
                <div :class="item.overlayClassName">
                  <template v-for="(btn, key1) in item.actions">
                    <el-button
                      v-if="buttonVisible(btn, row)"
                      :key="key1"
                      :disabled="buttonDisabled(btn, row)"
                      :loading="btn.loading"
                      v-bind="btn.attrs"
                      v-on="eventsBindHandle(row, btn.events)"
                      @click="buttonClick(btn, row)"
                    >{{ buttonText(btn, row) }}</el-button>
                  </template>
                </div>
              </template>
              <!-- 普通文本 -->
              <template v-else>
                {{ friendly(_get(row, item.prop), isVoid(item.void) ? '-' : item.void) }}
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <el-row v-if="$scopedSlots['table-tip'] || paginationVisible()" type="flex" justify="end" class="el-table-pagination">
      <el-col :xs="24" :sm="24" :lg="8" :xl="8">
        <div v-if="$scopedSlots['table-tip']" class="el-table-tip">
          <slot name="table-tip" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="16" :xl="16">
        <el-pagination
          v-if="paginationVisible()"
          :class="pagination.overlayClassName"
          :layout="pagination.layout"
          :background="pagination.background"
          :total="pagination.total"
          :current-page="pagination.pageNum"
          :page-size="pagination.pageSize"
          :page-sizes="pagination.pageSizeOptions"
          @current-change="pageNumChange"
          @size-change="pageSizeChange"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { _get, _typeof } from '@/components/libs/util'
import JxlTip from '@/components/libs/Tip/JxlTip'
import mixin from '@/components/libs/mixin'

export default {
  name: 'JxlTable',
  components: { JxlTip },
  mixins: [mixin],
  props: {
    rowSelection: {
      type: Object,
      default: null
    },
    rowKey: {
      type: [String, Function],
      default: 'key',
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: [Object, Array],
      required: true
    },
    pagination: {
      type: [Object, Boolean],
      default: () => {
        return {
          total: 0, // 总条数
          pageNum: 1, // 当前页码数
          pageSize: 10, // 每页显示条数
          pageSizeOptions: [10, 20, 30, 50], // 指定每页可以显示多少条
          layout: 'total, prev, pager, next, sizes, jumper',
          background: true,
          overlayClassName: ''
        }
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    align: {
      type: String,
      default: 'left'
    },
    headerAlign: {
      type: String,
      default: 'left'
    },
    // 自动布局，平均列宽，当数据为空时
    autoLayout: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dataPage: [], // 每页数据，当data的数据大于pageSize时需要用到
      isAutoLayout: false // 是否自动布局
    }
  },
  watch: {
    data: {
      handler: function() {
        this.dataTotalChange() // 数据总量发生改变
      },
      deep: true
    }
  },
  created() {
    this.dataTotalChange() // 数据总量发生改变
  },
  methods: {
    /**
     * 列显示条件发生改变
     */
    columnsChange() {
      Object.keys(this.columns).map(key => {
        const OBJ = this.columns[key]
        if (this._typeof(OBJ.condition) !== Function) return
        OBJ.hidden = OBJ.condition()
      })
    },
    /**
     * 页码页数发生改变
     * @param pageNum 当前页
     */
    pageNumChange(pageNum) {
      if (this._typeof(this.pagination) !== Object) return
      this.pagination.pageNum = pageNum
      this.pagingWayHandle() // 分页方式处理
      if (this._typeof(this.pagination['onChange']) !== Function) return
      this.pagination['onChange'](pageNum, this.pagination['pageSize'])
    },
    /**
     * 页码大小发生改变
     * @param pageSize 每页条数
     */
    pageSizeChange(pageSize) {
      if (this._typeof(this.pagination) !== Object) return
      this.pagination['pageSize'] = pageSize
      this.pagingWayHandle() // 分页方式处理
      if (this._typeof(this.pagination['onPageSizeChange']) !== Function) return
      this.pagination['onPageSizeChange'](this.pagination['pageNum'], pageSize)
    },
    /**
     * 分页器可见
     * @returns {boolean}
     */
    paginationVisible() {
      if (this._typeof(this.pagination) !== Object) return false
      if (this._typeof(this.pagination['total']) !== Number) return false
      return this.pagination['total'] > 0
    },
    /**
     * 获取行类型，普通、单选、多选
     * @returns {string|*}
     */
    getRowType() {
      if (this._typeof(this.rowSelection) !== Object) return ''
      if (this._typeof(this.rowSelection.type) !== String) return ''
      return this.rowSelection.type
    },
    /**
     * 数据总量发生改变
     */
    dataTotalChange() {
      if (this._typeof(this.pagination) !== Object) {
        this.dataPage = this.data // 不分页则直接全部显示
        return false
      }
      if (this._typeof(this.pagination['total']) === Number) {
        if (this.pagination['total'] < this.data.length) {
          this.pagination['total'] = this.data.length
        }
      } else {
        this.pagination['total'] = this.data.length
      }
      this.pagingWayHandle() // 分页方式处理
      this.getAutoLayout() // 获取布局
    },
    /**
     * 分页方式处理
     */
    pagingWayHandle() {
      /**
       * 数据条数比规定的页码大小要大，说明需要手动支持分页功能
       */
      if (this.data.length > this.pagination['pageSize']) {
        this.pagingHandle() // 静态数据分页处理
      } else {
        this.dataPage = this.data // 动态数据分页处理
      }
    },
    /**
     * 静态数据分页处理
     */
    pagingHandle() {
      const firstIndex = (this.pagination['pageNum'] - 1) * this.pagination['pageSize']
      const lastIndex = firstIndex + this.pagination['pageSize']
      this.dataPage = this.data.slice(firstIndex, lastIndex)
    },
    /**
     * 选择行发生改变
     */
    selectionChange(rows) {
      const keys = []
      rows.map(item => {
        let key
        if (this._typeof(this.rowKey) === Function) {
          key = this.rowKey(item)
        } else if (this._typeof(this.rowKey) === String) {
          key = item[this.rowKey]
        }
        keys.push(key)
      })
      if (this.rowSelection.selectedRows) {
        this.rowSelection.selectedRows = rows
      }
      if (this.rowSelection.selectedRowKeys) {
        this.rowSelection.selectedRowKeys = keys
      }
      if (this._typeof(this.rowSelection.onSelectedRowChange) === Function) {
        this.rowSelection.onSelectedRowChange(keys, rows)
      }
    },
    /**
     * 单选行改变
     * @param currentRow 当前行
     * @param oldCurrentRow 上一行
     */
    currentChange(currentRow, oldCurrentRow) {
      if (this.getRowType() !== 'radio') return false
      this.selectionChange([currentRow]) // 选择行发生改变
    },
    /**
     * 行展开改变
     * @param row
     * @param expandedRows 所有展开的行
     */
    expandChange(row, expandedRows) {
      if (this._typeof(_get(this.rowSelection, 'onExpandChange')) !== Function) return
      if (this._typeof(expandedRows) === Array) this.rowSelection.onExpandChange(row, expandedRows.includes(row), expandedRows)
      if (this._typeof(expandedRows) === Boolean) this.rowSelection.onExpandChange(row, expandedRows)
    },
    /**
     * 事件绑定处理
     * @param item
     * @param events
     */
    eventsBindHandle(item, events) {
      if (this._typeof(events) !== Object) return undefined
      const newEvents = {}
      Object.keys(events).map(key => {
        newEvents[key] = (value, value2) => { events[key](item, value, value2) }
      })
      return newEvents
    },
    /**
     * 按钮可见
     * @param item 被点击的按钮
     * @param row 本行的数据
     */
    buttonVisible(item, row) {
      return this.isVisible(item, row)
    },
    /**
     * 按钮文本
     * @param item 被点击的按钮
     * @param row 本行的数据
     */
    buttonText(item, row) {
      if (this._typeof(item.text) === Function) return item.text(row)
      return item.text
    },
    /**
     * 按钮隐藏
     * @param item 被点击的按钮
     * @param row 本行的数据
     */
    buttonDisabled(item, row) {
      return this.isDisabled(item, row)
    },
    /**
     * 按钮点击
     * @param btn 被点击的按钮
     * @param row 本行的数据
     */
    buttonClick(btn, row) {
      if (this._typeof(btn.onClick) !== Function) return void (0)
      btn.onClick(row)
    },
    /**
     * 是否是操作列
     * @param item
     */
    isActions(item) {
      return this._typein(item.actions, [Array, Object])
    },
    /**
     * 获取操作列宽度
     */
    getActionWidth(item) {
      if (!item.autoWidth || !this.isActions(item)) return this.getWidth(item)
      let width = 0
      let number = 0
      Object.keys(item.actions).map(key => {
        if (!this.isHidden(item.actions[key])) {
          number += 1
          width += item.actions[key].width
        }
      })
      return width + (item.cellPadding * 2) + item.marginRight + item.spaceBetween * (number - 1)
    },
    /**
     * 获取列的宽度
     * @param item
     */
    getWidth(item) {
      if (this.isVoid(item.width)) return ''
      return item.width
    },
    /**
     * 获取列的最小宽度
     * @param item
     */
    getMinWidth(item) {
      if (this.isVoid(item.minWidth)) return 120
      return item.minWidth
    },
    /**
     * 获取列的对齐方式
     * @param item
     */
    getAlign(item) {
      if (this._typeof(item.align) === String) return item.align
      if (this._typeof(this.align) === String) return this.align
      return 'left'
    },
    /**
     * 获取表头列的对齐方式
     * @param item
     */
    getHeaderAlign(item) {
      if (this._typeof(item.headerAlign) === String) return item.headerAlign
      if (this._typeof(this.headerAlign) === String) return this.headerAlign
      return 'left'
    },
    /**
     * 获取布局
     * @returns {boolean}
     */
    getAutoLayout() {
      if (!this.autoLayout) {
        this.isAutoLayout = false
      } else if (this._typeof(this.pagination) === Boolean) {
        this.isAutoLayout = this.data.length === 0
      } else if (this._typeof(this.pagination) === Object) {
        this.isAutoLayout = this.pagination['total'] === 0
      }
    },
    /**
     * 插入属性
     * @param item
     */
    insertAttrs(item) {
      const attrs = _typeof(item.attrs) === Object ? item.attrs : {}
      if ('show-overflow-tooltip' in attrs || 'showOverflowTooltip' in attrs) return attrs
      if (this.isActions(item)) return Object.assign(attrs, { 'show-overflow-tooltip': false })
      return Object.assign(attrs, { 'show-overflow-tooltip': true })
    }
  }
}
</script>
<style lang="less" scoped>
.el-table-wrapper {
  .el-table-body {
    padding: 0;

    /deep/ .el-table {
      &.auto-layout colgroup {
        display: none;
      }
      &.auto-layout .el-table__cell.is-hidden > * {
        visibility: visible;
      }
      .header-label-icon {
        margin-left: 5px;
      }
      th {
        background-color: #f5f8fa;
        color: #252631;
        font-weight: 400;
      }
    }
  }
  .el-table-pagination {
    margin-top: 20px;

    .el-table-tip {
      padding: 0 0 20px 20px;
      color: #778ca2;
      font-size: 14px;
    }
    /**分页样式*/
    /deep/ .el-pagination {
      padding: 0 20px 20px 0;
      text-align: right;
      font-weight: 500;
      position: relative;
      white-space: normal;

      .el-pager {
        li {
          padding: 0 0;
          height: 28px;
          line-height: 28px;
        }
        li:not(.disabled).active {
          background-color: #409EFF;
          color: #FFF;
        }
        li:hover {
          border: 1px solid #297aff;
          color: #ffffff;
        }
        &:not(.disabled).active {
          border: none;
        }
        &:not(.disabled).active:hover {
          border: none;
        }
      }
      &.is-background {
        .btn-next,
        .btn-prev,
        .el-pager li {
          background-color: #ffffff;
          min-width: 28px;
          border: 1px solid #ececec;
          color: #a6b6c6;

          &:hover {
            border: 1px solid #297aff;
            color: #297aff;
          }
        }

        .btn-next.disabled,
        .btn-next:disabled,
        .btn-prev.disabled,
        .btn-prev:disabled,
        .el-pager li.disabled {
          background-color: #f7f7f7;
          min-width: 28px;
          border: 1px solid #e3e3e3;
          color: #a6b6c6;
        }

        .btn-next:not(.disabled).active {
          border: 1px solid #297aff;
          color: #ffffff;
        }
        .btn-prev:not(.disabled).active {
          border: 1px solid #297aff;
          color: #ffffff;
        }
        .btn-next:not(.disabled):hover,
        .btn-prev:not(.disabled):hover {
          border: 1px solid #297aff;
          color: #297aff;
        }
        .btn-next:disabled:hover,
        .btn-prev:disabled:hover {
          background-color: #f7f7f7;
          border: 1px solid #e3e3e3;
          color: #a6b6c6;
        }
        .btn-next {
          margin-right: 9px;
        }
      }
      .el-pagination__total {
        color: #b4b9c6;
        display: inline-block !important;
      }
      .el-pagination__sizes .el-input__inner {
        color: #b4b9c6;
      }
      .el-pagination__jump {
        color: #b4b9c6;
        margin-left: 0;
      }
      .el-select .el-input {
        width: 82px;
      }
    }
  }
}
</style>