pc_shop_site/components/table/TotalTable.vue

<template>
  <div class="wrap">
    <p class="tb-title" :class="{ 'left': tableType }">
      <span>{{ title }}</span>
      <span :style="{ width:comWidth  + 'px' }" v-if="title=='Sell Price' &&comLocationNum !==1">Total</span>
    </p>
    <el-table
      ref="elTable" border :data="tableData" :header-cell-style="{
      backgroundColor: '#fff',
      color: '#606266',
      fontWeight: 500,
      fontSize: '16px'
    }" stripe>
      <el-table-column
       v-for="(item, index) in tableColumns" :key="`${curOrder}-${item.prop}`" :align="item.align ? item.align : 'center'"
        :prop="item.prop" :label="item.label" :formatter="item.formatter" :sortable="item.sortable">
        <template slot="header" slot-scope="scope">
          <div v-if="title=='Buy Price' && comLocationNum === 1">
            <el-input
              v-show="!item.isFirstColumn"
              v-model="item.label"
              size="small"
              type="number"
              @blur="getNumber($event, index)"
              :min="min"
            />
            <span v-show="item.isFirstColumn">{{ item.label }}</span>
          </div>
          <div v-else>
            <span>{{ item.label }}</span>
          </div>
        </template>
        <template slot-scope="scope">
          <template v-if="tableType && !item.isFirstColumn">
            <span>{{
              scope.row[item.prop]
              | differencePrice(
                curDecoration[item.prop],
                indexDecoration[item.prop],
                poaConfig
              )
            }}</span>
          </template>
          <template v-else>
            <span
                v-if="(typeof scope.row[item.prop]=='string' && scope.row[item.prop].includes('.') || typeof scope.row[item.prop]=='number') &&
                !item.isFirstColumn">$</span>
            <span>{{
              scope.row[item.prop] ? scope.row[item.prop] : '0.00'
            }}</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { minus as npMinus } from 'number-precision'

export default {
  filters: {
    differencePrice(a, curDecoVal, indexDecoVal, poaConfig) {
      const rep = /^[0-9]+(\.[0-9]*)?$/
      if (!rep.test(a)) {
        return a || 'Waived';
      }

      if (poaConfig.includes(curDecoVal) || poaConfig.includes(indexDecoVal)) {
        if (curDecoVal === '111' || curDecoVal === '111.00' || indexDecoVal === '111' || indexDecoVal === '111.00') {
          return '-';
        } else if (curDecoVal === '999' || curDecoVal === '999.00' || indexDecoVal === '999' || indexDecoVal === '999.00') {
          return 'POA';
        }
      } else if (curDecoVal === indexDecoVal) {
          return 0;
      } else if (+curDecoVal > +indexDecoVal) {
        return `-$ ${npMinus(curDecoVal, indexDecoVal)}`;
      } else if (+curDecoVal < +indexDecoVal) {
        return `+$ ${npMinus(indexDecoVal, curDecoVal)}`;
      } else {
        return 'Waived';
      }
    }

  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tableColumns: {
      type: Array,
      default: () => [],
    },
    tableType: {
      type: String,
      default: '',
    },
    curDecoration: {
      type: Object,
      default: () => { },
    },
    indexDecoration: {
      type: Object,
      default: () => { },
    },
    comLocationNum: {
      type: Number,
      default: 1,
    },
    curOrder: {
      type: String,
      default: '',
    },
    min: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      poaConfig: ['111', '111.00', '999', '999.00'],
    }
  },
  methods: {
    getNumber(e, index) {
        if (parseInt(e.target.value) < this.min) {
            this.$emit('send-idx', index);
        }
      },
    },
  computed: {
    comWidth(){
      return 800/this.tableColumns.length - 1
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  overflow-x: auto;
}
.tb-title {
  background-color: #e90000;
  color: #fff;
  font-size: 16px;
  margin-top: 20px;
  font-weight: 600;
  display: flex;
  span{
    display: inline-block;
    height: 34px;
    line-height: 34px;
    text-align: center;
    &:nth-child(1){
      flex:1;
    }
    &:nth-child(2){
      border-left: 1px solid #EBEEF5;
    }
  }
}
.left {
  background-color: #fff;
  color: #000;
  text-align: left;
}

pre {
  text-align: center;
  color: #606266;
  font-family: Proxima Nova;
}

:deep(.el-table--scrollable-x ::-webkit-scrollbar) {
      display: none;
}

:deep(.is-center:nth-child(1)) {
  border-right: 1px solid #efefef;
}

:deep(.cell) {
  padding: 0;
  // white-space: nowrap;
  // text-overflow: clip;
  // overflow: visible;
}

:deep(.el-input__inner) {
  padding-right: 0;
  text-align: center;
}
</style>