element ui的table表单

&小胖&

已于 2023-11-07 14:11:50 修改

阅读量367

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2021-11-28 21:12:03 首次发布

本文链接：https://blog.csdn.net/a2739294436/article/details/121597744

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue.js中实现动态获取并显示表格的表头。示例包括两种不同的方法，一种是通过直接引用`header`数组来设置表头，另一种是使用`v-for`循环动态创建表头，展示了数据绑定和模板语法在前端表格渲染中的应用。

摘要由CSDN通过智能技术生成

1.动态获取表头

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column :label="header[0]" :key="index">
        <template scope="scope">
          {{ scope.row.date }}
        </template>
      </el-table-column>
      <el-table-column :label="header[1]" :key="index">
        <template scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="地址" :key="index" prop="address">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      header: ['日期', '名字'],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  }
}
</script>

效果图

2.动态获取表头

<template>
  <el-table :data="data_list">
    <el-table-column :label="date" v-for="(date, key) in header" :key="key">
      <template scope="scope">
        {{ data_list[scope.$index][key] }}
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      header: ['时间', '名字', '地址'],
      data_list: [
        ['2016-05-01', '王小虎1', '上海市普陀区金沙江路 1511 弄'],
        ['2016-05-02', '王小虎2', '上海市普陀区金沙江路 1512 弄'],
        ['2016-05-03', '王小虎3', '上海市普陀区金沙江路 1513 弄']
      ]
    }
  }
}
</script>

效果