基于Vue.js的动态路由表格设计资源-CSDN文库

共2个文件

js：1个

html：1个

需积分: 5 156 浏览量 2022-06-15 21:53:01 上传评论收藏 91KB ZIP 举报

Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。在“基于Vue.js的动态路由表格设计”项目中，我们主要关注的是如何利用Vue.js实现动态路由管理和创建交互式的表格。让我们深入理解Vue.js中的动态路由。动态路由是允许我们在同一个路由路径下处理不同数据的一种机制。在Vue Router中，我们可以定义带有动态段的路由，这些动态段以冒号`:`开头，例如`/:id`。当用户访问类似`/user/1`或`/user/2`的URL时，`id`会根据实际URL捕获到相应的值，这在处理如用户详情、文章列表等场景时非常实用。为了实现动态路由，我们需要在Vue Router配置中定义路由规则，并在Vue组件中通过`this.$route.params`来获取动态参数。例如： ```javascript // 路由配置 const routes = [ { path: '/user/:id', component: UserDetail }, ] // 在UserDetail组件中获取动态参数 export default { data() { return { userId: this.$route.params.id, } }, } ``` 接下来，我们讨论动态表格的设计。在Vue.js中，可以使用`v-for`指令来创建动态列表，结合`v-bind`或`:key`来绑定数据。表格通常会涉及到复杂的数据操作，比如排序、过滤和分页。我们可以利用Vuex来管理状态，存储表格数据，同时使用计算属性来处理排序和过滤逻辑。例如： ```html <template> <table> <tr v-for="item in filteredItems" :key="item.id">  </tr> </table> </template> <script> import { computed } from 'vue' import { mapState } from 'vuex' export default { computed: { ...mapState(['items']), filteredItems() { // 过滤逻辑，例如按名字排序 return this.items.sort((a, b) => a.name.localeCompare(b.name)) }, }, } </script> ``` 在项目中，`2.html`可能是一个用于展示动态路由表格的HTML页面，而`vue.js`则是Vue.js库本身或者项目构建后的JS文件，用于运行整个应用。在VSCode或IDEA这样的集成开发环境中，我们可以得到诸如代码提示、自动完成、错误检查等便利功能，提高开发效率。总结来说，“基于Vue.js的动态路由表格设计”项目涵盖了前端开发中的关键概念，包括Vue Router的动态路由、Vue组件的交互式表格实现、状态管理（如Vuex）以及使用现代IDE进行高效的前端开发。理解并掌握这些技术将对提升你的前端开发能力大有裨益。

资源详情

资源评论

资源推荐

收起资源包目录

动态路由表格.zip （2个子文件）

vue.js

vue.js 334KB

2.html 11KB

<!DOCTYPE html> <html> <head> <meta > <title>实验2</title> <script src="../vue.js"></script> <style> #table{ padding: 0 10px; } #table table{ width: 100%; font-size: 14px; border: 1px solid #eee; } table thead th { background: #f5f5f5; padding: 10px; text-align: left; } table tbody td{ padding: 10px; text-align: left; border-bottom: 1px solid #eee; border-right: 1px solid #eee; } table tbody td span { margin: 0 10px; cursor: pointer; } .delete { color: red; } .edit{ color: #008cd5; } .add{ border: 1px solid #eee; margin: 10px 0; padding: 15px; } input{ border: 1px solid #eee; margin: 10px ; padding: 15px; } button{ background: #008cd5; border: 0; padding: 4px; border-radius: 3px; color: #fff; } #mask{ background: rgba(0, 0, 0, .5); width: 100%; height: 100%; position: fixed; z-index: 4; top: 0; left: 0; } .mask{ width: 400px; height: 380px; /*这里就是调那个修改窗口的大小呀！还有颜色呀，背景这些呀*/ background: rgba(255, 255, 255, 1); position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 47; border-radius: 5px; } .title{ padding: 10px; border-bottom: 1px solid #eee; } .title span { float: right; cursor: pointer; } .content{ padding: 10px; } .content input{ width: 200px; margin-bottom: 15px; } </style> </head> <body> <div id="table"> <div class="add"> <label>学号:</label> <input type="text" v-model="addStudent.stuNo" name="stuNo" placeholder="请输入学号" />  <label>姓名:</label> <input type="text" v-model="addStudent.stuName" name="stuName" placeholder="请输入学号" /> <label>班级:</label> <input type="text" v-model="addStudent.stuClass" name="stuClass" placeholder="请输入学号" /> <label>专业:</label> <input type="text" v-model="addStudent.stuMajor" name="stuMajor" placeholder="请输入学号" /> <button @click="add">添加</button> </div> <table> <thead> <tr> <th>序号</th> <th>学号</th> <th>姓名</th> <th>班级</th> <th>专业</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in stuList"> <td>{{ index+1 }}</td> <td>{{ item.stuNo }}</td> <td>{{ item.stuName }}</td> <td>{{ item.stuClass }}</td> <td>{{ item.stuMajor }}</td> <td> <span @click="deletelist(item.id,index)" class="delete">删除</span> <span @click="edit(item)" class="edit">编辑</span> </td> </tr> </tbody> </table> <div id="mask" v-if="editlist">  <div class="mask"> <div class="title"> 编辑<span @click="editlist=false">x</span> </div> <div class="content"> <div class="input-item"> <label>学号:</label> <input type="text" v-model="editStudent.stuNo" name="stuNo" placeholder="请输入学号" /> </div> <div class="input-item"> <label>姓名:</label> <input type="text" v-model="editStudent.stuName" name="stuName" placeholder="请输入学号" /> </div> <div class="input-item"> <label>班级:</label> <input type="text" v-model="editStudent.stuClass" name="stuClass" placeholder="请输入学号" /> </div> <div class="input-item"> <label>专业:</label> <input type="text" v-model="editStudent.stuMajor" name="stuMajor" placeholder="请输入学号" /> </div> <div class="input-item" style="text-align: center;"> <button @click="update">更新</button> > <button @click="editlist=false">取消</button> </div> </div> </div> </div> </div> <script> new Vue({ el:'#table', data() { //数据部分 return { addStudent:{}, //存放添加信息的数据 editlist:false, editStudent:{}, stuList:[ { stuNo:'20190101001', stuName:'令狐冲', stuClass:'19大数据技术1班', stuMajor:'大数据技术' }, { stuNo:'20190101002', stuName:'天博光', stuClass:'19大数据技术1班', stuMajor:'大数据技术' }, { stuNo:'20190101003', stuName:'不可不戒', stuClass:'19大数据技术1班', stuMajor:'大数据技术' }, { stuNo:'20190101004', stuName:'曲阳', stuClass:'19大数据技术1班', stuMajor:'大数据技术'