ElementUI是一套基于VUE2.0的桌面端組件庫，ElementUI提供了豐富的組件幫助開發人員快速構建功能強大、風格統一的頁面。
官網地址：http://element-cn.eleme.io/#/zh-CN
在頁面上引入 js 和 css 文件即可開始使用，如下：
<!-- 引入ElementUI樣式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入ElementUI組件庫 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
設置表格組件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入element得css樣式--> <link type="text/css" rel="stylesheet" href="css/index.css"/> <!--引入vue得js文件 這個必須在element之前引入--> <script type="text/javascript" src="js/vue.js"></script> <!--element得js文件--> <script type="text/javascript" src="js/index.js"></script> </head> <body> <!--創建一個標簽使vue掛載到該標簽上--> <div id="app"> <!--:data==綁定了vue中定義得數據tableData border表示設置表格邊框 el-table-column:表示列標簽 prop:該屬性得名稱必須和tableData中對象得屬性名一致。 label：表格得標題 width: 設置列得寬度 --> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" > </el-table-column> <el-table-column prop="name" label="姓名" > </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column fixed="right" label="操作" > <template slot-scope="scope"> <el-button type="text" size="small">查看</el-button> <el-button type="text" size="small">編輯</el-button> </template> </el-table> </div> </body> <!--表示自定義得js文件--> <script> var app=new Vue({ el:"#app", data:{ tableData:[ {"date":"2020-05-11","name":"張三","address":"北京"}, {"date":"2021-05-11","name":"李四","address":"鄭州"}, {"date":"2022-05-11","name":"五五","address":"杭州"}, {"date":"2023-06-11","name":"六六","address":"上海"}, ], } }) </script> </html>
REF
https://blog.csdn.net/Ysuhang/article/details/125058537
Element-UI-快速入門（極簡教程）
https://blog.csdn.net/qq_33820545/article/details/108529789
https://blog.csdn.net/m0_52711377/article/details/123705574
https://element.eleme.cn/#/zh-CN/component/layout
