b站视频演示效果：
效果图：
完整代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品管理系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.sidebar {
width: 220px;
background-color: #2c3e50;
height: 100vh;
position: fixed;
top: 0;
left: 0;
color: white;
padding: 20px;
}
.sidebar h3 {
color: white;
margin-bottom: 30px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
margin-bottom: 20px;
}
.sidebar ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}
.topbar {
background-color: #007BFF;
color: white;
padding: 15px;
font-size: 18px;
text-align: center;
}
.content {
margin-left: 240px;
padding: 20px;
}
.search-section {
background-color: white;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.table-section {
background-color: white;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
</style>
</head>
<body>
<div id="app">
<!-- 左侧导航栏 -->
<div class="sidebar">
<h3>商品管理系统</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商品管理</a></li>
<li><a href="#">订单管理</a></li>
<li><a href="#">分类管理</a></li>
<li><a href="#">设置</a></li>
</ul>
</div>
<!-- 主内容区域 -->
<div class="content">
<!-- 顶部导航栏 -->
<div class="topbar">商品管理系统</div>
<!-- 搜索区域 -->
<div class="search-section">
<el-form :inline="true" :model="searchForm">
<el-form-item label="商品名称">
<el-input v-model="searchForm.productName" placeholder="请输入商品名称"></el-input>
</el-form-item>
<el-form-item label="分类">
<el-input v-model="searchForm.category" placeholder="请输入分类"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.status" placeholder="请选择状态">
<el-option label="在售" value="在售"></el-option>
<el-option label="下架" value="下架"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">搜索</el-button>
<el-button type="success" @click="openDialog('add')">新增商品</el-button>
</el-form-item>
</el-form>
</div>
<!-- 表格区域 -->
<div class="table-section">
<el-table
:data="paginatedData"
stripe
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="productName"
label="商品名称"
width="200">
</el-table-column>
<el-table-column
prop="category"
label="分类"
width="180">
</el-table-column>
<el-table-column
prop="price"
label="价格"
width="120">
</el-table-column>
<el-table-column
prop="stock"
label="库存"
width="120">
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120">
<template slot-scope="scope">
<el-button @click="openDialog('edit', scope.row)" type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
layout="prev, pager, next"
:total="filteredData.length"
:page-size="rowsPerPage"
@current-change="handlePageChange"
:current-page.sync="currentPage">
</el-pagination>
</div>
<!-- 新增和修改弹框 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
<el-form :model="formData">
<el-form-item label="商品名称" :label-width="formLabelWidth">
<el-input v-model="formData.productName"></el-input>
</el-form-item>
<el-form-item label="分类" :label-width="formLabelWidth">
<el-input v-model="formData.category"></el-input>
</el-form-item>
<el-form-item label="价格" :label-width="formLabelWidth">
<el-input type="number" v-model="formData.price"></el-input>
</el-form-item>
<el-form-item label="库存" :label-width="formLabelWidth">
<el-input type="number" v-model="formData.stock"></el-input>
</el-form-item>
<el-form-item label="状态" :label-width="formLabelWidth">
<el-select v-model="formData.status">
<el-option label="在售" value="在售"></el-option>
<el-option label="下架" value="下架"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</el-dialog>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
searchForm: {
productName: '',
category: '',
status: ''
},
currentPage: 1,
rowsPerPage: 10,
data: [
{ id: 1, productName: '苹果 iPhone 14', category: '手机', price: 5999, stock: 100, status: '在售' },
{ id: 2, productName: '戴尔 XPS 13', category: '电脑', price: 8999, stock: 50, status: '下架' },
{ id: 3, productName: '三星 Galaxy S21', category: '手机', price: 4999, stock: 30, status: '在售' },
{ id: 4, productName: '华为 Mate 40', category: '手机', price: 6999, stock: 60, status: '在售' },
{ id: 5, productName: '索尼 WH-1000XM4', category: '耳机', price: 1999, stock: 80, status: '在售' },
],
dialogVisible: false,
dialogTitle: '',
formLabelWidth: '100px',
formData: {
id: null,
productName: '',
category: '',
price: 0,
stock: 0,
status: ''
}
},
computed: {
filteredData() {
return this.data.filter(row => {
const matchesProductName = row.productName.includes(this.searchForm.productName);
const matchesCategory = row.category.includes(this.searchForm.category);
const matchesStatus = this.searchForm.status === '' || row.status === this.searchForm.status;
return matchesProductName && matchesCategory && matchesStatus;
});
},
paginatedData() {
const start = (this.currentPage - 1) * this.rowsPerPage;
const end = start + this.rowsPerPage;
return this.filteredData.slice(start, end);
}
},
methods: {
search() {
this.currentPage = 1;
},
handlePageChange(val) {
this.currentPage = val;
},
openDialog(action, row = null) {
if (action === 'add') {
this.dialogTitle = '新增商品';
this.formData = {
id: null,
productName: '',
category: '',
price: 0,
stock: 0,
status: ''
};
} else if (action === 'edit' && row) {
this.dialogTitle = '编辑商品';
this.formData = { ...row };
}
this.dialogVisible = true;
},
handleSave() {
if (this.formData.id) {
// 修改操作
const index = this.data.findIndex(item => item.id === this.formData.id);
if (index !== -1) {
this.data.splice(index, 1, { ...this.formData });
}
} else {
// 新增操作
this.formData.id = this.data.length + 1; // 模拟ID自增
this.data.push({ ...this.formData });
}
this.dialogVisible = false;
}
}
});
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！
本人承接网网站开发，如有需要，欢迎私信咨询！
如果您感觉文章对您有帮助~
那就打赏一下，请笔者喝杯咖啡吧~
给新手学习前端开发的建议：
-
了解基础知识：
- 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心，构成了网页的基本结构和样式，以及交互功能。
- 掌握HTML的标签和语义化，了解CSS的选择器和布局技巧，熟悉JavaScript的基本语法和DOM操作。
-
实践项目：
- 不要仅仅停留在理论学习上，通过实践项目来巩固和应用所学知识。
- 可以从简单的静态页面开始，逐渐尝试添加交互效果和动态数据。
- 参与开源项目或自己动手创建一个个人网站，将所学知识应用到实际场景中。
-
学习工具和框架：
- 了解并学习前端开发中常用的工具和框架，如构建工具（Webpack、Gulp等）、版本控制工具（Git）、前端框架（React、Vue、Angular等）。
- 这些工具和框架能够提高开发效率，简化开发流程，是前端开发的重要组成部分。
-
关注前端趋势：
- 前端开发是一个快速发展的领域，新的技术和工具不断涌现。
- 关注前端社区、博客和会议，了解最新的技术趋势和发展方向，保持学习的热情和动力。
-
培养解决问题的能力：
- 前端开发常常会遇到各种问题和挑战，学会独立思考和解决问题是非常重要的。
- 遇到问题时，可以先尝试自己解决，通过查阅文档、搜索资料和社区讨论来找到答案。
- 如果实在无法解决，可以向同事或社区求助，但也要学会总结和分享自己的经验和教训。
-
不断学习和提升：
- 前端开发是一个不断学习和提升的过程，要保持对知识的渴望和追求。
- 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
- 同时，也要关注自己的职业发展，了解行业的需求和趋势，规划自己的职业道路。
-
注重代码质量和可维护性：
- 编写高质量的代码是前端开发的基本要求之一。
- 学习并遵循代码规范，使用适当的命名和注释来提高代码的可读性。
- 注重代码的结构和逻辑，避免过度嵌套和复杂的逻辑。
- 考虑代码的可维护性，尽量编写可复用和可扩展的代码。
-
参与社区和交流：
- 加入前端开发的社区和论坛，与其他开发者进行交流和分享。
- 通过参与社区活动、回答问题、分享经验等方式，不仅可以提升自己的技能水平，还可以结识更多的同行和朋友。
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
加油吧！
扫一扫
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
