dvcp_v2_webapp/components/layout/AiDvTable/AiDvTable.vue

<template>
  <div class="aiDvTable" :class="'aiDvTable-' + theme">
    <div class="header" :style="headerStyle">
      <span
        v-for="(item, index) in header"
        :key="index"
        :style="{
          width: config[index].width ? config[index].width + 'px' : '',
          textAlign: config[index].align,
          flex: config[index].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: config[i].color,
            textAlign: config[i].align,
            fontSize: config[i].fontSize,
            width: config[i].width ? config[i].width + 'px' : '',
            flex: config[i].width ? 'inherit' : 1
          }">
          <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
          <span :title="column.v">{{ column.v }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

      headerStyle: {
        type: Object,
        default: () => {}
      },

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

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

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

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

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

    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
        })

        this.header = value.map(v => {
          return {
            v: v[headerKey]
          }
        })

        this.body = bodyKey.map(v => {
          return value.map(e => {
            return {
              v: e[v]
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .aiDvTable {
    height: 100%;
    overflow: hidden;

    ::-webkit-scrollbar {
      width: 5px;
      height: 14px;
    }

    ::-webkit-scrollbar-corner {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-clip: content-box;
      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
    }

    ::-webkit-scrollbar-track {
      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
    }

    .header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      font-size: 16px;
      padding: 0 16px;
      color: rgba(255, 255, 255, 0.7);
      background: rgba(70, 70, 70, 0.35);

      span {
        flex: 1;
        text-align: center;
        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;
          }
        }
      }
    }

    &.aiDvTable-1 {
      ::-webkit-scrollbar {
        width: 5px;
        height: 14px;
      }

      ::-webkit-scrollbar-corner {
        background: transparent;
      }

      ::-webkit-scrollbar-thumb {
        min-height: 20px;
        background-clip: content-box;
        box-shadow: 0 0 0 5px rgba(250, 181, 108, 0.5) inset;
      }

      ::-webkit-scrollbar-track {
        box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
      }
      .header {
        background: rgba(226, 121, 81, 0.2);
      }

      .body {
        div {
          i {
            color: #FFA086;
            background: url(./asset/rankbg-dj.png) no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
</style>