一个简单的易用的用Vue3开发的数据表组件
介绍
vue3-easy-data-table是一个专为Vue3 设计的数据表格组件, 它简化了数据展示,排序,筛选和分页等常见需求的实现过程。 该组件旨在提供一个灵活且易用的解决方案, 让开发者能够快速集成到自己的项目中, 提升开发效率和用户体验. 简单的说, 这个组件, 就是可以用来在网页中放置美观的表格, 并且具有排序, 筛选和分页等功能的工具.
一个例子
用组件绘制一个电脑比价的表格. 代码如下. 这里用cdn安装方式. 可以将代码保存为html文件, 用浏览器直接打开查看效果.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<link href="https://unpkg.com/vue3-easy-data-table/dist/style.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue3-easy-data-table"></script>
<style>
.operation-wrapper .operation-icon {
width: 20px;
cursor: pointer;
}
.brand-wrapper {
padding: 5px;
display: flex;
align-items: center;
justify-items: center;
}
.avator {
margin-right: 10px;
display: inline-block;
width: 46px;
height: 46px;
border-radius: 2%;
object-fit: cover;
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 10%);
}
</style>
<div id="app">
<easy-data-table
show-index
alternating
border-cell
buttons-pagination
@click-row="showRow"
:headers="headers"
:items="items">
<template #item-brand="{ brand, avator, pageurl }">
<div class="brand-wrapper">
<img class="avator" :src="avator" alt="" />
<a target="_blank" v-bind:href="pageurl">{{ brand }}</a>
</div>
</template>
<template #expand="item">
<div style="padding: 15px">
{{item.suggest}}
</div>
</template>
</easy-data-table>
</div>
<script>
const App = {
components: {
EasyDataTable: window['vue3-easy-data-table'],
},
data () {
return {
headers:[
{ text: "brand type", value: "brand" },
{ text: "color ", value: "color", sortable: true },
{ text: "CPU-brand ", value: "CPU.brand", sortable: true },
{ text: "CPU-type ", value: "CPU.type" },
{ text: "CPU-Freq ", value: "CPU.Freq", sortable: true },
{ text: "CPU-cores ", value: "CPU.cores", sortable: true },
{ text: "memory ", value: "memory", sortable: true },
{ text: "hard disk ", value: "disk", sortable: true },
{ text: "interface, other ", value: "interface", sortable: true },
{ text: "operating system, software ", value: "system", sortable: true },
{ text: "price ", value: "price", sortable: true }
],
items: [
{ "brand": "HP Victus 15.6" i5 Gaming Laptop, TPN-Q278_599J4AV", "avator": "https://f.media-amazon.com/images/I/71LcEWz+3QL._AC_SX425_.jpg", "pageurl": "https://amzn.to/4gumftB", "color": "Blue","CPU": {"brand":"Intel", "type": "Core i5", "Freq": "4.4 GHz", "cores" : 8}, "memory": "16GB RAM", "disk": "1T SSD", "interface": "Backlit KB, Touchpad, SD Card Reader, Webcam, HDMI, Wi-Fi 6", "system": "Windows 11 Home", "characteristics": "for Business and Student","price": "$690", "suggest": "If you have enough budget, this is a good configuration with high cost performance",},
{ "brand": "Lenovo V15 G4 15.6" FHD Business Laptop, TPN-Q278_599J4AV", "avator": "https://f.media-amazon.com/images/I/71LcEWz+3QL._AC_SX425_.jpg", "pageurl": "https://amzn.to/3B3QA1v", "color": "","CPU": {"brand":"Intel", "type": "i5-13420H ", "Freq": "2.1 GHz", "cores" : 8}, "memory": "16GB RAM", "disk": "1T SSD", "interface": "WiFi 6, Bluetooth 5.2, RJ45", "system": "Windows 11 Pro", "characteristics": "for Business and Student","price": "$579", "suggest": "Meet general needs, cost-effective",},
{ "brand": "Lenovo 15.6" 2024 IdeaPad 1 Laptop", "avator": "https://f.media-amazon.com/images/I/71LcEWz+3QL._AC_SX425_.jpg", "pageurl": "https://amzn.to/3XxZMUI", "color": "Cloud Grey","CPU": {"brand":"Intel", "type": "Core i5", "Freq": "4.4 GHz", "cores" : 4}, "memory": "16GB RAM", "disk": "512 GB", "interface": "Intel Iris Xe Graphics, Wi-Fi 6", "system": "Windows 11 Pro & Wireless Mouse", "characteristics": "for Business and Student","price": "$509", "suggest": "Meet general needs, cost-effective",},
{ "brand": "Lenovo Ideapad 1 15" - 82R400EMUS", "avator": "https://f.media-amazon.com/images/I/71LcEWz+3QL._AC_SX425_.jpg", "pageurl": "https://amzn.to/3ZyrFxF", "color": "Cloud Grey","CPU": {"brand":"AMD", "type": "Ryzen 5 5500U", "Freq": "2.1 GHz", "cores" : 1}, "memory": "8GB RAM", "disk": "512GB SSD", "interface": "720p Camera w/Privacy Shutter", "system": "Windows 11 Home", "characteristics": "Smart Noise Cancelling","price": "$304","suggest": "Low configuration, view web pages, documents",},
{ "brand": "HP Laptop", "avator": "https://f.media-amazon.com/images/I/711OHeRmEaL._AC_SX425_.jpg", "pageurl": "https://amzn.to/3B3tVm0", "color": "Snowflake White","CPU": {"brand":"Intel", "type": "N4120", "Freq": "1.1 GHz", "cores" : 4}, "memory": "8GB RAM", "disk": "192GB Storage(64GB eMMC+128GB Micro SD)", "interface": "Webcam, HDMI, WiFi, USB-A&C", "system": "Win 11 S, 1 Year Office 365", "characteristics": "Ultral Light Laptop for Students and Business","price": "$249", "suggest": ""},
],
}
},
methods:{
"showRow": (e) => {
// console.log(e);
}
}
};
Vue.createApp(App).mount('#app');
</script>
</body>
</html>
I’ve been following your updates closely, keep up the awesome work