vue3.2/Vite/Ts70: SKU管理模块静态搭建
·
Yin灏
目录结构
└─src
└─views
└─product
└─sku
└─index.vue
SKU 管理静态搭建
src/views/product/sku/index.vue
<template>
<el-card>
<el-table border>
<el-table-column
label="序号"
type="index"
align="center"
width="80px"
></el-table-column>
<el-table-column
label="名称"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
label="描述"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column label="图片">
<template #="{ row }">
<img :src="" alt="" />
</template>
</el-table-column>
<el-table-column label="重量" width="150px"></el-table-column>
<el-table-column label="价格" width="150px"></el-table-column>
<el-table-column label="操作" width="250px" fixed="right">
<el-button type="primary" size="small"></el-button>
</el-table-column>
<el-table-column></el-table-column>
</el-table>
<!-- 分页器 -->
<el-pagination
v-model:current-page="pageNo"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40]"
:background="true"
layout="prev, pager, next, jumper, -> , sizes, total"
:total="400"
></el-pagination>
</el-card>
</template>
<script setup lang="ts">
import { ref } from "vue";
let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
</script>