首页在html页面使用element ui组件的表格样式写一个表格

在html页面使用element ui组件的表格样式写一个表格

时间: 2024-06-01 16:09:59 浏览: 138

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Element UI Table Example</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="ID" width="80"></el-table-column> <el-table-column prop="name" label="Name" width="180"></el-table-column> <el-table-column prop="age" label="Age" width="80"></el-table-column> <el-table-column prop="gender" label="Gender" width="100"></el-table-column> </el-table> </template> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function() { return { tableData: [ { id: 1, name: 'John', age: 23, gender: 'Male' }, { id: 2, name: 'Jane', age: 29, gender: 'Female' }, { id: 3, name: 'Bob', age: 42, gender: 'Male' }, { id: 4, name: 'Alice', age: 31, gender: 'Female' }, { id: 5, name: 'Steve', age: 19, gender: 'Male' } ] } } }) </script> </body> </html>

阅读全文