el-table动态列表，表头按照接口返回展示

菜鸟的备忘录

于 2023-04-24 13:56:33 发布

阅读量567

点赞数

分类专栏：常用code 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/hilary_front/article/details/130341103

版权

常用code 专栏收录该内容

6 篇文章

订阅专栏

这段HTML代码展示了如何在Vue.js应用中使用ElementUI的el-table组件来创建一个带有索引、省市区列以及动态生成列的表格。每一列的数据绑定到对象的属性，且通过v-for指令遍历tableTitle数组来构建动态列。点击单元格时，会触发goToDetail方法，展示详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="180" />
      <el-table-column prop="province" label="省（区、市）" width="200" />
      <el-table-column prop="city" label="城市（自治州）" width="200" />
      <el-table-column
        v-for="(item, index) in tableTitle"
        :prop="item.key"
        :label="item.name"
        min-width="220"
      >
        <template #default="scope">
          <el-link type="primary" @click="goToDetail(scope, item.key)">{{
            scope.row[item.key]
          }}</el-link>
        </template>
      </el-table-column>
    </el-table>

数据结构：