pc_shop_site/components/table/paramTable.vue

<template>
  <div>
    <table>
      <tbody>
        <tr class="title">
          <th width="250px">parameters</th>
          <th width="250px">type</th>
          <th width="250px" v-if="colShow">required</th>
          <th width="250px">description</th>
        </tr>
        <template>
          <tr v-for="(items, key) in data" :key="key">
            <td>{{ items.parameters }}</td>
            <td>{{ items.type }}</td>
            <td  v-if="colShow">{{ items.required }}</td>
            <td>{{ items.description }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    data: {},
    colShow: { type: Boolean, default: false },
  },
};
</script>

<style lang="scss" scoped>
table {
  // border-collapse: collapse;
  font-size: 16px;
  text-align: left;
  overflow: hidden;
  border-right: 1px solid #686868;
  border-top: 1px solid #686868;
  border-spacing: 0;
  tr {
    height: 40px;
    &:nth-child(1) {
      background-color: #e90000;
    }
    th {
      border-left: 1px solid #686868;
      border-bottom: 1px solid #686868;
      vertical-align: middle;
      color: #fff;
      font-family: ProximaNova-Semibold;
      padding:0 5px;
    }
    td {
      border-left: 1px solid #686868;
      border-bottom: 1px solid #686868;
      vertical-align: middle;
      color: #4a596c;
      padding:0 5px;
    }
  }
}
</style>