thoth-frontend-test/src/components/baseTable/table.vue

<template>
  <div @click.stop>
    <el-table
      :data="tableList"
      class="bug_tableHeader"
      :header-cell-style="{ color: '#4A4A4A', fontSize: '14px', fontWeight: '500' }"
      :cell-style="{ 'font-size':'14px','color':'rgba(102,102,102,1)' }"
      row-key="id"
      style="width: auto;"
      :size="size"
      :height="tableHeight"
    >
      <el-table-column
        v-for="(columnItem, columnIndex) in column"
        :key="columnIndex"
        :label="columnItem.label"
        :prop="columnItem.key"
        :min-width="columnItem.minWidth"
        :align="columnItem.align"
        show-overflow-tooltip
      >
        <!-- 自定义表头 -->
        <template slot="header">
          <div v-if="columnItem.tips">
            {{ columnItem.label }}
            <el-tooltip
              effect="dark"
              :content="columnItem.tips"
              placement="top"
              popper-class="cycleStatistic-tips">
              <i class="el-icon-info" />
            </el-tooltip>
          </div>
          <div v-else>
            {{ columnItem.label }}
          </div>
        </template>
        <!-- 自定义列内容 -->
        <template slot-scope="scope" style="text-align: center;">
          <!-- 缺陷等级 -->
          <div v-if="columnItem.type === 'level'">
            <div class="priorityTag" :style="{background: priorityColors[scope.row[columnItem.key][1]] || '#BDBDBD'}">
              {{ scope.row[columnItem.key] }}
            </div>
          </div>
          <!-- 2行 -->
          <div v-else-if="columnItem.type === 'topTitle'">
            <div class="drawer-id">{{ `${columnItem.topName} - ${scope.row[columnItem.topKey]}` }}</div>
            <div class="drawer-name ellipsis" @click.stop="columnItemChange(columnItem, scope.row)">{{ scope.row[columnItem.key] }}</div>
          </div>
          <!-- 链接点击跳转 -->
          <div v-else-if="columnItem.type === 'link'">
            <div class="drawer-name ellipsis" @click.stop="columnItemChange(columnItem, scope.row)">{{ scope.row[columnItem.key] }}</div>
          </div>
          <!-- 插槽 -->
          <div v-else-if="columnItem.type === 'slot'">
            <slot :name="columnItem.slotName" :scope="scope" />
          </div>
          <div v-else>
            {{ scope.row[columnItem.key] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    tableList: {
      type: Array,
      required: false,
      default: () => []
    },
    column: {
      type: Array,
      required: false,
      default: () => []
    },
    tableHeight: {
      type: String,
      required: false,
      default: () => '100%'
    },
    size: {
      type: String,
      required: false,
      default: () => ''
    }
  },
  data() {
    return {
      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD']
    }
  },
  methods: {
    columnItemChange(column, row) {
      this.$emit('change', { column, row })
    }
  }
}
</script>

<style scoped lang='less'>
.bug_tableHeader {
  padding: 0 20px;
}

.div_priority {
  color: #ffffff;
  padding: 0 12px;
  border-radius: 4px;
  margin-left: 4px;

  display: inline-block;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
  margin-right: 30px;
}

.drawer-name:hover {
  color: #409eff;
  cursor: pointer;
}

.wrap {

  table-layout: fixed;
  word-wrap: break-all;

  word-break: normal;

  overflow: hidden;

}

.drawer-id {
  color: rgb(167, 174, 188);
  font-size: 10px;
}

/*tips*/
/deep/ .cycleStatistic-tips {
  width: 500px;
  background: rgba(121, 132, 150, 0.8);
  color: #FFF;
}
.priorityTag {
  display: inline-block;
  text-align: center;
  font-size: 14px;
  color: #fff;
  border-radius: 4px;
  padding: 2px 10px;
}
.ellipsis {
  width: calc(100% - 5px);
}
</style>