【Python100天学习笔记】Day29 UI框架-Element
【Python100天学习笔记】Day29 UI框架-Element
天道Vax的时间宝藏
发布于 2022-04-01 09:19:00
发布于 2022-04-01 09:19:00
文章被收录于专栏：用户5305560的专栏
UI框架 - Element
基于Vue 2.0的桌面端组件库，用于构造用户界面，支持响应式布局。
- 引入Element的CSS和JavaScript文件。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>- 一个简单的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">点我</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>开始使用Element吧</p>
</el-dialog>
</div>
</body>
<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: {
visible: false,
}
})
</script>
</html>- 使用组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</body>
<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: {
tableData: [
{
date: '2016-05-02',
name: '王一霸',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '刘二狗',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '杨三萌',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '陈四吹',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
})
</script>
</html>报表框架 - ECharts
百度出品的开源可视化库，常用于生成各种类型的报表。
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
腾讯云 BI
腾讯云 BI（Business Intelligence，BI）提供从数据源接入、数据建模到数据可视化分析全流程的BI能力，帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计，使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程，并支持报表的分享、推送等企业协作场景。
腾讯云开发者
