+Vue+el-table のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+el-table へ行く。
- 1 (2022-05-13 (金) 10:49:22)
- 2 (2022-05-26 (木) 11:28:56)
- 3 (2022-06-23 (木) 11:07:04)
- 4 (2022-07-03 (日) 14:12:41)
- 5 (2022-08-24 (水) 16:41:32)
- 6 (2022-09-03 (土) 14:17:41)
- 7 (2022-09-05 (月) 14:16:18)
- 8 (2022-09-29 (木) 13:57:22)

※前提条件：本文基于 Vue 2.0 创作

prop 属性对应对象中的键名，用来填充数据；label 属性定义表格的列名；width 属性定义表格的列宽。

<template>
  <el-table :data="tableData" class="data_table">
    <el-table-column prop="number" label="编号" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="info" label="描述">
    </el-table-column>
  </el-table>
</template>

    data () {
      return {
        tableData: [{
          number: '2016001',
          name: '小明',
          info: '这是第一条数据'
        }, {
          number: '2016002',
          name: '小明',
          info: '这是第二条数据'
        }, {
          number: '2016003',
          name: '小明',
          info: '这是第三条数据'
        }, {
          number: '2016004',
          name: '小明',
          info: '这是第四条数据'
        }, {
          number: '2016005',
          name: '小明',
          info: '这是第五条数据'
        }]
      }
    }

コメント：