曾晨曦_branch
parent
5ee869116b
commit
7993782b9b
@ -1,47 +1,51 @@
|
||||
<template>
|
||||
<el-button @click="add">Add Item</el-button>
|
||||
<el-button @click="onDelete">Delete Item</el-button>
|
||||
<el-scrollbar max-height="800px">
|
||||
<p v-for="item in count" :key="item" class="scrollbar-demo-item">
|
||||
{{ item }}
|
||||
</p>
|
||||
<p v-for="review in reviews" :key="review.id" class="scrollbar-demo-item">
|
||||
{{ review.content }}
|
||||
</p>
|
||||
</el-scrollbar>
|
||||
<div class="orders-container">
|
||||
<div v-if="orders.length > 0">
|
||||
<div class="order" v-for="order in orders" :key="order.id">
|
||||
<div>Order ID: {{ order.id }}</div>
|
||||
<div>Customer Name: {{ order.customerName }}</div>
|
||||
<div>Total Amount: {{ order.totalAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>No orders available</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
|
||||
const count = ref(3)
|
||||
const reviews = ref([
|
||||
{ id: 1, content: 'Great product!' },
|
||||
{ id: 2, content: 'Fast shipping!' },
|
||||
{ id: 3, content: 'Excellent customer service!' }
|
||||
])
|
||||
|
||||
const add = () => {
|
||||
count.value++
|
||||
}
|
||||
const onDelete = () => {
|
||||
if (count.value > 0) {
|
||||
count.value--
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orders: []
|
||||
};
|
||||
},
|
||||
// Fetch orders data from backend when the component is created
|
||||
created() {
|
||||
this.fetchOrders();
|
||||
},
|
||||
methods: {
|
||||
async fetchOrders() {
|
||||
try {
|
||||
const response = await fetch('http://106.52.218.118:8081');
|
||||
this.orders = await response.json();
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scrollbar-demo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
<style>
|
||||
.orders-container {
|
||||
height: 400px; /* Set height for scrolling */
|
||||
overflow-y: auto; /* Enable vertical scrolling */
|
||||
}
|
||||
|
||||
.order {
|
||||
border: 1px solid #003f3f;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,49 @@
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value"
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="State Abbreviations"
|
||||
:data="data"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
<script>
|
||||
interface Option {
|
||||
key: number
|
||||
label: string
|
||||
initial: string
|
||||
}
|
||||
|
||||
const generateData = () => {
|
||||
const data: Option[] = []
|
||||
const states = [
|
||||
'California',
|
||||
'Illinois',
|
||||
'Maryland',
|
||||
'Texas',
|
||||
'Florida',
|
||||
'Colorado',
|
||||
'Connecticut ',
|
||||
]
|
||||
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
|
||||
states.forEach((city, index) => {
|
||||
data.push({
|
||||
label: city,
|
||||
key: index,
|
||||
initial: initials[index],
|
||||
})
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
const data = ref<Option[]>(generateData())
|
||||
const value = ref([])
|
||||
|
||||
const filterMethod = (query, item) => {
|
||||
return item.initial.toLowerCase().includes(query.toLowerCase())
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Loading…
Reference in new issue