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：表格得标题 设置列得宽度 --> <el-table :data="tableData" border style=" 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