vue 表格虚拟dom渲染

封装了element表格的组件

<template>
  <div class="pc-table">
    <search-bar
      ref="searchBar"
      :query="table.query"
      :search-data="table.searchData"
      @on-search-change="searchTable"
    >
      <div slot="after">
        <slot name="ctrl-button" />
      </div>
    </search-bar>
    <el-table
      ref="pc-table"
      v-loading="table.loading"
      border
      :max-height="height"
      :show-summary="table.sum"
      :summary-method="getSummaries"
      class="my-table"
      tooltip-effect="dark"
      :data="table.data"
      :row-key="getRowKeys"
      :row-class-name="tableRowClassName"
      element-loading-text="数据加载中..."
      :header-cell-style="handleTheadStyle"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="table.columns && table.columns.some(t => t.type === 'selection')"
        type="selection"
        align="center"
        width="50"
        :reserve-selection="true"
      />
      <el-table-column
        v-if="table.columns && table.columns.some(t => t.type === 'index')"
        type="index"
        fixed="left"
        align="center"
        :default-sort="{ prop: 'apprenticeCounts' }"
        label="序号"
        width="50"
      />
      <el-table-column
        v-for="(column, idx) in table.columns.filter(
          t => t.type !== 'selection' && t.type !== 'index'
        )"
        :key="idx"
        :type="column.type"
        :label="column.title"
        :sortable="column.sort ? 'custom' : false"
        :prop="column.key"
        :width="column.width"
        :fixed="column.fixed"
        :align="column.align || 'center'"
        :show-overflow-tooltip="column.showTooltip"
      >
        <template v-if="column.type !== 'selection'" slot-scope="scope" ,>
          <cell v-if="column.render"
            :column="column"
            :row="scope.row"
            :index="scope.$index"
            :render="column.render"
            :show-overflow-tooltip="column.showTooltip"
          />
          <span v-else>
            <span v-if="column.enumType">
              {{
                $enums[column.enumType].getName(Number(scope.row[column.key]))
              }}
            </span>
            <span v-else>
              <span v-if="column.type === 'ratio'">
                <span>
                  {{
                    (scope.row[column.before] || "--") +"/"+(scope.row[column.after] || "--")
                  }}
                </span>
              </span>
              <span v-else-if="column.replace">
                {{ column.replacekey }}
              </span>
              <span v-else-if="column.type === 'divide'">
                <span v-if="scope.row[column.before] && scope.row[column.after]">
                  {{
                    Math.round((scope.row[column.before] / scope.row[column.after]) * 100) + "%"
                  }}
                </span>
                <span v-else>0%</span>
              </span>
              <span v-else>{{
                scope.row[column.key] ? scope.row[column.key]: scope.row[column.key] === 0 ? 0 : "--"
              }}</span>
            </span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="table.pagination"
      class="pagination"
      layout="total, sizes, prev, pager, next, jumper"
      :total="table.pagination.total"
      :current-page.sync="table.pagination.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="table.query.size"
      @size-change="handleSizeChange"
      @current-change="search(table)"
    />
  </div>
</template>


import SearchBar from '@/components/SearchBar'
import cell from './cell'
export default {
  components: {
    SearchBar,
    cell
  },
  props: {
    table: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      height: document.body.scrollHeight - 260,
      activeP: null,
      activeO: null,
      getRowKeys(row) {
        return row.id || row.adminId
      },
      totalChange: false,
      query: {}
    }
  },
  watch: {
    'table.pagination.page': function(n, o) {
      if (n < o && this.totalChange) {
        this.table.pagination.page = n
        this.$search(this.table)
      }
    },
    'table.pagination.total': function(n, o) {
      if (n < o) {
        this.totalChange = true
      }
    }
  },
  created() {
    this.query = this.$_.cloneDeep(this.table.query)
    this.$set(this.table, 'loading', false)
    if (!this.table.hidePagination) {
      this.$set(this.table, 'pagination', {
        page: 1,
        total: 0
      })
    }
    this.search(this.table)
  },
  methods: {
    clearSelect() {
      this.$refs['pc-table'].clearSelection()
    },
    handleTheadStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === this.activeThead) {
        column.order = this.activeO
      }
    },
    sortChange({ column, prop, order }) {
      this.activeP = null
      this.activeO = null
      this.activeP = prop
      this.activeO = order
      // const { startTime, endTime } = this.table.query
      // this.query.startTime = startTime
      // this.query.endTime = endTime
      if (this.table.query.colletStatus) {
        delete this.table.query.colletStatus
      }
      this.query = this.$_.cloneDeep(this.table.query)
      for (const i in this.query) {
        if (i.includes('Sort') || i.includes('sort')) {
          delete this.query[i]
        }
      }
      this.table.query = this.$_.cloneDeep(this.query)
      this.table.sort = true
      if (order === 'ascending') {
        this.$set(this.table.query, this.table.sortObj[prop], 1)
      } else {
        this.$set(this.table.query, this.table.sortObj[prop], 2)
      }
      this.search(this.table)
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      //console.log("test",data,columns);
      columns.forEach((e, idx) => {
        if (this.table.rental) {
          sums[0] = this.table.query.colletStatus
        } else if (idx === 0) {
          sums[idx] = '总额'
          return
        }
       // console.log(e.label);
        // const values = data.map(item => Number(item[e.property]))
        // if (
        //   e.label === '提现成功金额' ||
        //   e.label === '提现中金额' ||
        //   e.label === '失败金额'
        // ) {
        //   sums[idx] = values.reduce((prev, curr) => {
        //     const value = Number(curr)
        //     if (!isNaN(value)) {
        //       return prev + curr
        //     } else {
        //       return prev
        //     }
        //   }, 0)
        // }
        if (e.label === '提现成功金额') {
          sums[idx] = this.table.totalSuccessMoney
        }
        if (e.label === '提现中金额') {
          sums[idx] = this.table.totalNotMoney
        }
        if (e.label === '失败金额') {
          sums[idx] = this.table.totalCheckFailMoney
          console.log("sb",this.table.totalCheckFailMoney);
        }
        if (e.label === '红包金额') {
          sums[idx] = this.table.totalReward
          console.log("hb",this.table.totalReward);
        }
        if (
          e.label === '平台支出' ||
          e.label === '支出金额' ||
          e.label === '实际支出' ||
          e.label === '操作' ||
          e.label === '金额'
        ) {
          sums[idx] = this.table.num || 0
        }
        // if(e.label === '操作'){
        //    sums[idx] = ""
        // }
      })
      return sums
    },
    handleSizeChange(val) {
      this.table.query.size = val
      this.search(this.table)
    },
    searchTable(val) {
      this.$emit('select-change', val)
      this.$set(this.table, 'query', val)
      if (this.table.query.sortApi) {
        this.$set(this.table, 'sortApi', this.$api[this.table.query.sortApi])
      }
      this.table.pagination.page = 1
      this.search(this.table)
    },
    tableRowClassName({ row }) {
      if (row.readStatus === 'YES') {
        return 'unread'
      }
    },
    async search(table, cb) {
      if (table && table.api) {
        const query = this.$_.cloneDeep(table.query) || {}
        if (!table.hidePagination) {
          query.page = table.pagination.page
          query.size = this.table.query.size || 10
        }
        try {
          table.loading = true
          let res
          if (table.sort) {
            res = await table.sortApi(query)
          } else {
            if (table.hasData) {
              res = await table.api(query)
            } else {
              res = await table.api(Object.values(query))
            }
          }
          const data = res
          if (data instanceof Array) {
            // eslint-disable-next-line require-atomic-updates
            table.data =
              table.filter instanceof Function
                ? data.filter(table.filter)
                : data
          } else {
            data.records = data.records ? data.records : data.page.records
            // eslint-disable-next-line require-atomic-updates
            table.data =
              table.filter instanceof Function
                ? data.records.filter(table.filter)
                : data.records
            // eslint-disable-next-line require-atomic-updates
            table.pagination.total = data.total ? data.total : data.page.total
          }
          cb && cb(table.data)
        } catch (err) {
          console.warn('mytable', err)
        } finally {
          // eslint-disable-next-line require-atomic-updates
          table.loading = false
        }
      }
    },
    handleSelectionChange(val) {
      this.$emit('on-selection-change', val)
    }
  }
}