el-table 表格实现表头纵向 vue项目

废话不多说，直接上代码展示：

<template>

  <el-table

    :show-header="false"

    :data="tableData"

    border

    style="margin: 20px; width: 400px"

    class="my-table"

  >

    <el-table-column width="100" prop="title"></el-table-column>

    <el-table-column width="300" prop="value"></el-table-column>

  </el-table>

</template>

<script lang="ts">

export default {

  name: 'mallMember-detail',

  data() {

    return {

      tableData: [

        {

          id: 1,

          title: '射手',

          value: '后裔'

        },

        {

          id: 2,

          title: '法师',

          value: '安琪拉'

        },

        {

          id: 3,

          title: '打野',

          value: '孙悟空'

        }

      ]

    }

  },

  methods: {}

}

</script>

<style lang="less" scoped>

.my-table {

  :deep(.el-table__body td:first-child) {

    background-color: #e5e5e5;

  }

}

</style>

最终效果图：