vue 自定义table格式组件

<template>
  <div class="detail-form">
    <ul>
      <li
        v-for="(item, index) in tableData"
        :key="index"
      >
        <span>{{item.name}}</span>
        <ul v-if="item.children">
          <li
            v-for="(childItem, Ind) in item.children"
            :key="Ind"
          >
            <span
              v-for="(val, key) in childItem"
              :key="key"
              :class="key"
            >{{val}}</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tableHeight: 320,
      hideHeader: false
    };
  },
  props: {
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    tableData: function () {
      return [
        {
          name: '历史'
        },
        {
          name: '语文',
          children: [
            {
              col2: '序号',
              col3: 'this.detailData.xxx', // 对应的key
              col4: '单号',
              col5: ''
            },
            {
              col2: '序号',
              colLong: "",
            },
            {
              col2: '序号',
              col3: '',
              col4: '单号',
              col5: ''
            },
            {
              col2: '序号',
              col3: '',
              col4: '单号',
              col5: ''
            },
            {
              col2: '序号',
              col3: '',
              col4: '单号',
              col5: ''
            },
            {
              col2: '序号',
              col3: '',
              col4: '单号',
              col5: ''
            },
            {
              col2: '序号',
              col3: '',
              col4: '单号',
              col5: ''
            }
          ]
        },
      ];
    }
  },
  methods: {
    formatDate (date) {
      if (date) {
        return this.moment(date).format('YYYY-MM-DD');
      }
      return '';
    }
  }
};
</script>
<style lang="less" scoped>
.detail-form {
  width: 100%;
  color: #606266;
  box-sizing: border-box;
  font-size: 16px;
  > ul {
    width: 100%;
    list-style: none;
    > li {
      display: flex;
      align-items: stretch;
      &:last-child {
        border-bottom: 1px solid #EDEEF0;
      }
      > span {
        flex: 1;
        padding: 8px 10px;
        border: 1px solid #EDEEF0;
        border-bottom: 0;
        border-right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1E2642;
        font-weight: 600;
        font-size: 16px;
        &:last-child {
          border-right: 1px solid #EDEEF0;
        }
      }
      > ul {
        flex: 5;
        > li {
          display: flex;
          span {
            border: 1px solid #EDEEF0;
            border-bottom: 0;
            border-right: 0;
            &:nth-child(1) {
              text-align: right;
              color: #6D7284;
              flex: 0 0 20%;
              padding: 8px 20px;
            }
            &:nth-child(2) {
              text-align: left;
              color: #1E2642;
              flex: 0 0 30%;
              padding: 8px 10px;
            }
            &:nth-child(3) {
              text-align: right;
              color: #6D7284;
              flex: 0 0 20%;
              padding: 8px 20px;
            }
            &:nth-child(4) {
              text-align: left;
              color: #1E2642;
              flex: 0 0 30%;
              padding: 8px 10px;
            }
            &:last-child {
              border-right: 1px solid #EDEEF0;
            }
          }
          span.colLong{
            flex: 0 0 80%;
          }
        }
      }
    }
  }
}
</style>

效果图：