vue el-table表格的使用

Element UI组件 Table 表格的用法很简单，开发者手册有详细的介绍。

表头的定义：

<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>

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

填充数据：

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

页面效果：

这个表格是没有竖直方向的边框边框的，加个竖直方向的边框试试：

<template>
  <el-table :data="tableData" border 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>

Element UI组件Table表格在默认情况下没有竖直方向的边框，简单的border 属性，就可以给表格加上竖直方向的边框。

页面效果如下：