element动态表头

最新推荐文章于 2025-06-07 19:35:38 发布

原创最新推荐文章于 2025-06-07 19:35:38 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

Element 专栏收录该内容

9 篇文章

订阅专栏

这篇博客展示了如何在Vue.js应用中利用Element-UI库创建一个带表头的动态表格。示例代码包括了如何通过`v-for`指令遍历表头数据`tableHead`和表格数据`tableData`，展示姓名、年龄和性别的信息。这个例子对于理解Vue.js组件化开发和Element-UI的表格组件非常有帮助。

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

<template>
  <div>
    <el-table style="width: 100%"
              border
              :data="tableData">
      <template v-for="(item,index) in tableHead">
        <el-table-column :prop="item.column_name"
                         :label="item.column_comment"
                         :key="index"></el-table-column>
      </template>
    </el-table>
  </div>
</template>

data () {
  return {
     // 表头数据
     tableHead: [
       {
         column_name: 'column_name', column_comment: '姓名'
       },
       {
         column_name: 'column_age', column_comment: '年龄'
       },
       {
         column_name: 'column_sex', column_comment: '性别'
       }
     ],
     // 表格数据
     tableData: [{
       column_age: '3',
       column_name: '鞠婧祎',
       column_sex: '女'
     },
     {
       column_age: '25',
       column_name: '魏大勋',
       column_sex: '男'
     },
     {
       column_age: '18',
       column_name: '关晓彤',
       column_sex: '女'
     }]

   }
 },