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.surveyName" placeholder="请输入调查表名称"></el-input>
</el-form-item>
<el-form-item label="创建者">
<el-input v-model="searchForm.creator" 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="surveyName"
label="调查表名称"
width="200">
</el-table-column>
<el-table-column
prop="creator"
label="创建者"
width="180">
</el-table-column>
<el-table-column
prop="questionCount"
label="问题数量"
width="120">
</el-table-column>
<el-table-column
prop="createDate"
label="创建日期"
width="150">
</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.surveyName"></el-input>
</el-form-item>
<el-form-item label="创建者" :label-width="formLabelWidth">
<el-input v-model="formData.creator"></el-input>
</el-form-item>
<el-form-item label="问题数量" :label-width="formLabelWidth">
<el-input type="number" v-model="formData.questionCount"></el-input>
</el-form-item>
<el-form-item label="创建日期" :label-width="formLabelWidth">
<el-date-picker v-model="formData.createDate" type="date" placeholder="选择日期"></el-date-picker>
</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: {
surveyName: '',
creator: '',
status: ''
},
currentPage: 1,
rowsPerPage: 10,
data: [
{ id: 1, surveyName: '用户满意度调查', creator: '张三', questionCount: 10, createDate: '2023-01-01', status: '进行中' },
{ id: 2, surveyName: '市场调研问卷', creator: '李四', questionCount: 15, createDate: '2023-02-15', status: '已结束' },
{ id: 3, surveyName: '员工反馈调查', creator: '王五', questionCount: 8, createDate: '2023-03-10', status: '进行中' },
{ id: 4, surveyName: '产品改进建议', creator: '赵六', questionCount: 12, createDate: '2023-04-05', status: '已结束' },
{ id: 5, surveyName: '客户需求分析', creator: '陈七', questionCount: 20, createDate: '2023-05-20', status: '进行中' },
],
dialogVisible: false,
dialogTitle: '',
formLabelWidth: '100px',
formData: {
id: null,
surveyName: '',
creator: '',
questionCount: 0,
createDate: '',
status: ''
}
},
computed: {
filteredData() {
return this.data.filter(row => {
const matchesSurveyName = row.surveyName.includes(this.searchForm.surveyName);
const matchesCreator = row.creator.includes(this.searchForm.creator);
const matchesStatus = this.searchForm.status === '' || row.status === this.searchForm.status;
return matchesSurveyName && matchesCreator && 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,
surveyName: '',
creator: '',
questionCount: 0,
createDate: '',
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等)。
- 这些工具和框架能够提高开发效率,简化开发流程,是前端开发的重要组成部分。
-
关注前端趋势:
- 前端开发是一个快速发展的领域,新的技术和工具不断涌现。
- 关注前端社区、博客和会议,了解最新的技术趋势和发展方向,保持学习的热情和动力。
-
培养解决问题的能力:
- 前端开发常常会遇到各种问题和挑战,学会独立思考和解决问题是非常重要的。
- 遇到问题时,可以先尝试自己解决,通过查阅文档、搜索资料和社区讨论来找到答案。
- 如果实在无法解决,可以向同事或社区求助,但也要学会总结和分享自己的经验和教训。
-
不断学习和提升:
- 前端开发是一个不断学习和提升的过程,要保持对知识的渴望和追求。
- 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
- 同时,也要关注自己的职业发展,了解行业的需求和趋势,规划自己的职业道路。
-
注重代码质量和可维护性:
- 编写高质量的代码是前端开发的基本要求之一。
- 学习并遵循代码规范,使用适当的命名和注释来提高代码的可读性。
- 注重代码的结构和逻辑,避免过度嵌套和复杂的逻辑。
- 考虑代码的可维护性,尽量编写可复用和可扩展的代码。
-
参与社区和交流:
- 加入前端开发的社区和论坛,与其他开发者进行交流和分享。
- 通过参与社区活动、回答问题、分享经验等方式,不仅可以提升自己的技能水平,还可以结识更多的同行和朋友。
总之,学习前端开发需要耐心和毅力,要保持对技术的热情和兴趣,不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式,你可以逐渐成为一名优秀的前端开发者。
加油吧!