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
标签：vue,name,element,ui,https,address From： https://www.cnblogs.com/emanlee/p/16694303.html