Vue Element是一套基于Vue.js 2.0的桌面端組件庫,其樣式風格參考了Element UI,但增添了更多適合桌面端的組件。
Vue Element組件庫包含了諸如表格、數據選擇器、日歷、時間選擇器、選項卡、對話框、通知、提示框等常見的組件,同時還提供了許多實用的指令與函數。
下面是一個簡單的Vue Element的應用示例:
<template><div><el-table :data="tableData" 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></template><script>export default {
data() {
return {
tableData: [{
date: '2021-09-01',
name: '張三',
address: '北京市朝陽區'
}, {
date: '2021-09-02',
name: '李四',
address: '上海市浦東新區'
}, {
date: '2021-09-03',
name: '王五',
address: '廣州市天河區'
}, {
date: '2021-09-04',
name: '趙六',
address: '深圳市福田區'
}],
};
},
};
</script>
以上代碼實現了一個簡單的表格,其中使用了el-table
,el-table-column
兩個組件,展示了姓名、日期、地址三列數據。這個簡單的例子只是Vue Element的冰山一角,僅僅顯示了其簡單易用、美觀大方的特點,實際上,Vue Element的組件和功能還遠遠不止于此。
上一篇python 求余弦距離
下一篇python 類的認識