vue+element-ui,element-ui组件中没有表头的表格怎么实现，怎么通过右侧名称动态获取数据

vue+element-ui,element-ui组件中没有表头的表格怎么实现，如下图所示，怎么通过右侧名称动态获取数据

建议用el-descriptions

<el-descriptions
            class="margin-top"
            title="带边框列表"
            :column="1"
            border
        >
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    用户名
                </template>
                kooriookami
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    手机号
                </template>
                18100000000
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    居住地
                </template>
                苏州市
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    备注
                </template>
                <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    联系地址
                </template>
                江苏省苏州市吴中区吴中大道 1188 号
            </el-descriptions-item>
        </el-descriptions>

show-header 改成false 表头就不显示了 通过名称动态获取数据具体指什么

【以下回答由 GPT 生成】

我可以通过以下步骤来解决你的问题：

1. 首先，你需要下载并安装Vue和Element UI。你可以通过以下命令在你的项目中安装它们：

npm install vue
npm install element-ui

1. 在你的Vue组件中，引入el-table和el-table-column组件，并注册它们：

import { ElTable, ElTableColumn } from 'element-ui';
export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  // 组件的其他代码
}

1. 在模板中，使用el-table组件来创建表格，并设置border属性为false以去掉边框样式。同时，设置show-header属性为false以隐藏表头：

<template>
  <div>
    <el-table :data="tableData" :border="false" :show-header="false">
      <!-- 表格列的具体内容 -->
    </el-table>
  </div>
</template>

1. 在el-table组件中，使用el-table-column组件来定义表格的列。通过遍历右侧的名称数据，动态生成表格的列：

<el-table :data="tableData" :border="false" :show-header="false">
  <el-table-column v-for="item in rightNames" :key="item" :prop="item">
    <!-- 列的具体内容 -->
  </el-table-column>
</el-table>

1. 在Vue的data选项中，定义tableData和rightNames变量。tableData表示表格的数据，你可以根据需要从后端获取。rightNames表示右侧名称的数据，可以根据后端接口返回的数据来设置：

data() {
  return {
    tableData: [
      // 表格的具体数据，可以根据需要设置
    ],
    rightNames: [
      // 右侧名称的具体数据，可以根据需要设置
    ],
  }
},

1. 最后，你可以根据后端接口的返回结果，来动态设置tableData和rightNames的值。可以通过Vue的生命周期函数mounted来发送异步请求并获取数据：

mounted() {
  // 发送异步请求获取表格数据和右侧名称数据，然后设置到data中的tableData和rightNames变量中
},

通过以上步骤，你就可以在Vue+Element UI中实现一个没有表头的表格，并通过右侧名称动态获取数据了。如果你还有其他问题，请随时告诉我。

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7395203
• 这篇博客你也可以参考下：使用vue+element-ui,打包后element-ui的图片显示小方块，本地没有问题
• 您还可以看一下 jason老师的vue通用后台管理课程中的 element-ui在网页中的使用小节, 巩固相关知识点
  
• 除此之外, 这篇博客: vue element-ui之怎么封装一个自己的组件中的 对element-ui组件进一步封装介绍 部分也许能够解决你的问题。