因为table自带的样式不太友好，设计稿的样式挺好看，就将其封装成一个组件，以后可能会复用，先收藏一下。

使用

<tableCom :t-header="tHeader" :key-val="keyValList" :list="tableList"></tableCom>
import tableCom from '@/components/tableCom/index'

export default {
  name: 'documentCom',
  components: {tableCom},
  props: {
    status: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      tHeader: ['参数名', '必选', '类型', '说明'],
      keyValList: ['param', 'required', 'type', 'Description'],
      tableList: [
        {
          param: 'appId',
          required: '是',
          type: 'string',
          Description: '应用唯一标识'
        },
        {
          param: 'timestamp',
          required: '是',
          type: 'string',
          Description: '时间戳'
        },
        {
          param: 'sign',
          required: '是',
          type: 'string',
          Description: '签名sign=md5（secret+ti'
        },
        {
          param: 'mobile',
          required: '是',
          type: 'string',
          Description: '手机号'
        },
        {
          param: 'callbackurl',
          required: '是',
          type: 'string',
          Description: '浏览器跳回回调地址，传递给接入方open'
        },
        {
          param: 'authType',
          required: '是',
          type: 'string',
          Description: '授权类型：userlnfo'
        }
      ]
    }
  },
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

组件

/**
* @Author: 858834013@qq.com
* @Name: tableCom
* @Date: 2022-08-21
* @Desc:
*/
<template>
  <div class="tableCom">
    <table>
      <thead>
      <tr>
        <th v-for="(item,index) in tHeader" :key="index"><span>{{ item }}</span></th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in list" :key="index">
        <td v-for="(itemK,indexK) in keyVal" :key="indexK"><span v-html="item[itemK]"></span></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

export default {
  name: "tableCom",
  components: {},
  props: {
    tHeader: {
      type: Array,
      default() {
        return []
      }
    },
    keyVal: {
      type: Array,
      default() {
        return []
      }
    },
    // 数据内容
    list: {
      type: Array,
      default() {
        return []
      }
    },
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.tableCom {
  width: 100%;

  table tr td, table tr th {
    border: 1px solid #f5f5f5;
  }

  td, th {
    border-right: 0;

    span {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      padding-left: 30px;
      line-height: 30px;
    }
  }

  table {
    width: 100%;
    border-spacing: 0;
    border: 1px solid rgba(153, 153, 153, 0.16);

    thead {
      background: #f8f8f8;
      font-size: 14px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #666666;
      height: 48px;
    }

    tbody {
      tr {
        height: 48px;
      }

      tr:nth-child(2n) {
        background: #f8f8f8;
      }
    }
  }
}
</style>

github地址

表格样式

演示