File size: 2,182 Bytes
77b0e0f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<script setup lang="ts">
const tableData = [
{
id: 1,
date: '2024-05-03',
name: '电动牙刷',
amount: 1,
address: '广东省广州市********',
status: '备货中'
},
{
id: 2,
date: '2024-05-02',
name: '平板电脑',
amount: 1,
address: '北京市朝阳区********',
status: '备货中'
},
{
id: 3,
date: '2024-05-01',
name: '唇膏',
amount: 1,
address: '浙江省杭州市********',
status: '已发货'
},
{
id: 4,
date: '2024-05-02',
name: '洗发露',
amount: 2,
address: '上海市黄浦区********',
status: '已完成'
}
]
</script>
<template>
<div>
<el-card shadow="never">
<template #header>
<!-- 头部 -->
<div class="card-header">
<div>
<el-form :inline="true">
<el-form-item label="搜索">
<el-input style="width: 240px" placeholder="商品名称" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary"> 查询 </el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" width="50" />
<el-table-column prop="name" label="商品名称" />
<el-table-column prop="amount" label="数量" />
<el-table-column prop="date" label="下单时间" />
<el-table-column prop="address" label="地址" />
<el-table-column label="订单状态" v-slot="{ row }" align="center" width="250px">
<el-tag :type="row.status === '已完成' ? 'success' : 'warning'">{{ row.status }}</el-tag>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<style lang="scss" scoped>
.el-card {
border-radius: 12px;
}
.box-card {
width: auto; // 卡片宽度
}
// 查询栏
.card-header {
display: flex;
justify-content: space-between; // 将两个 div 放置在页面的两侧
align-items: center;
.el-form-item {
margin-bottom: 0px; // 查询框和下面的组件间隔大小
}
}
</style>
|