dvcp_v2_webapp/components/layout/AiDvTable/AiDvTable.vue

<template>
  <div class="aiDvTable">
    <div class="header">
      <span
        v-for="(item, index) in header"
        :key="index"
        :style="{
          width: item.width + 'px',
          textAlign: item.align,
          flex: item.width ? 'inherit' : 1
        }">
        {{ item.v }}
      </span>
    </div>
    <div class="body">
      <div class="row" v-for="(item, index) in body" :class="[stripe === '1' ? 'stripe' : '']" :key="index">
        <div
          v-for="(column, i) in item"
          :key="i"
          :style="{
            color: column.color,
            textAlign: column.align,
            width: column.width + 'px',
            flex: column.width ? 'inherit' : 1
          }">
          <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
          <span>{{ column.v }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AiDvTable',

    props: {
      data: {
        type: Array,
        default: () => []
      },

      isShowIndex: {
        type: String,
        default: '0'
      },

      stripe: {
        type: String,
        default: '1'
      }
    },

    data () {
      return {
        header: [],
        body: [],
        colorIndex: ''
      }
    },

    watch: {
      data: {
        handler (v) {
          this.init(v)
        },
        deep: true,
        immediate: true
      }
    },

    mounted () {
    },

    methods: {
      init (value) {
        if (!value.length) {
          this.header = []
          this.body = []

          return false
        }

        const headerKey = Object.keys(value[0])[0]
        const bodyKey = Object.keys(value[0]).filter(v => {
          return v !== headerKey && v !== 'color' && v !== 'width'
        })

        this.header = value.map(v => {
          return {
            v: v[headerKey],
            align: v.align,
            width: Number(v.width || 0) ? (Number(v.width || 0) + (this.isShowIndex === '1' ? 0 : 0)) : ''
          }
        })

        this.body = bodyKey.map(v => {
          return value.map(e => {
            return {
              v: e[v],
              color: e.color,
              align: e.align,
              width: e.width || ''
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .aiDvTable {
    height: 100%;
    overflow: hidden;
    .header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      padding: 0 16px;
      background: rgba(70, 70, 70, 0.35);

      span {
        flex: 1;
        font-size: 16px;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow:ellipsis;

        &:first-child {
          text-align: left;
        }
      }
    }

    .body {
      height: calc(100% - 40px);
      padding: 10px 0;
      overflow-y: auto;
      box-sizing: border-box;
      .row {
        display: flex;
        align-items: center;
        width: 100%;
        height: 52px;
        padding: 0 16px;
        box-sizing: border-box;

        &.stripe:nth-of-type(2n) {
          background: rgba(48, 48, 48, 0.4);
        }

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
          font-size: 16px;
          text-align: center;
          color: #ffffff;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow:ellipsis;

          span {
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow:ellipsis;
          }

          i {
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin-right: 10px;
            text-align: center;
            font-size: 12px;
            color: #18FEFE;
            font-style: normal;
            background: url(./asset/rankbg.png) no-repeat;
            background-size: 100% 100%;
          }

          &:first-child {
            justify-content: start;
            text-align: left;
          }
        }
      }
    }
  }
</style>