Vue-cli+Element（table多级表头及遍历表头）

小豆花儿

于 2019-01-22 12:44:26 发布

阅读量7.5k

点赞数 2

分类专栏：随手记文章标签： vue 表格多级表头

本文链接：https://blog.youkuaiyun.com/qq_39242027/article/details/86590535

版权

随手记专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用Element UI的表格组件展示动态数据，通过示例代码展示了如何配置列标签和数据绑定，实现数据的高效展示。具体包括如何设置表头固定、列标签动态生成以及数据项的显示。

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

上代码：

<el-table
   :data="tableData"
    height //表头固定
    style="width: 100%">
        <el-table-column :label=title[key] v-for="(item,key) in title" :key="key">
          <el-table-column
            label="合格"
            class-name="normal-color">
            <template slot-scope="scope">
              {{scope.row[key*2]}}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="不合格"
            class-name="red-color">
            <template slot-scope="scope">
              {{scope.row[(key*2+1)]}}
            </template>
          </el-table-column>
        </el-table-column>
</el-table>
export default {
   data() {
      return {
      	title:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月"],
      	tableData:[
      		name:'1',
      		list:[3,5,1,2,6,3,4,5,7,8,9,5,4,1,2,3,6,5,4,1]
      	]
      }
   },

酱酱~ 成啦~
在这里插入图片描述