element-ui-table

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../element-ui2.13.2/element-ui/lib/theme-chalk/index.css">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <template>
            <el-table :data="tableData">
              <el-table-column label="日期" prop="date" width="180"></el-table-column>
              <el-table-column label="姓名" prop="name" width="180"></el-table-column>
              <el-table-column label="地址" prop="age" width="180"></el-table-column>
            </el-table>
        </template>
    </div>
</body>
<script src="../vue2.6.11/vue/dist/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="../element-ui2.13.2/element-ui/lib/index.js"></script>
  <script>
      new Vue({
          el: "#app",
          data:{
            tableData:[{
                date:"2016-05-02",
                name:"张三",
                age:18
            },{
                date:"2016-05-02",
                name:"张三",
                age:18
            },{
                date:"2016-05-02",
                name:"张三",
                age:18
            }]
          }
      })
  </script>
</html>

效果:

原文地址:https://www.cnblogs.com/LoganChen/p/13127223.html