企业营销型网站团队做门窗网站

当前位置： 首页 > news >正文

企业营销型网站团队,做门窗网站,wordpress neoease,数据科学与大数据技术目录 一、动态树 1.1 定义 1.2 导航菜单绑定 1.3 面板内容 1.4 效果展示 二、动态表格 2.1 定义 2.2 搜索框 2.3 数据表格 2.4 分页条 2.5 功能实现 一、动态树 1.1 定义 动态树通常是指在网页或应用程序中创建可展开和折叠的树形结构#xff0c;其中树的节点是动…目录 一、动态树 1.1 定义 1.2 导航菜单绑定 1.3 面板内容 1.4 效果展示 二、动态表格 2.1 定义 2.2 搜索框 2.3 数据表格 2.4 分页条 2.5 功能实现 一、动态树 1.1 定义 动态树通常是指在网页或应用程序中创建可展开和折叠的树形结构其中树的节点是动态加载的通常是从服务器端获取的数据。这种树结构常用于导航菜单、文件浏览器、组织结构图等场景用户可以展开或折叠节点以查看更多信息。 注本篇博客代码内容是基于上篇博客的代码而优化的包括功能的实现也是如需源码请点击前往上篇博客如下 Kissship——ElementUI之首页导航与左侧菜单https://blog.csdn.net/weixin_74263417/article/details/133273380?spm1001.2014.3001.5501 1.2 导航菜单绑定 首先需要实现面板之间的相互切换如下 LeftNav.vue加入以下代码 el-submenu v-form in menus :indexidx_m.id :keykey_m.idtemplate slottitlei :classm.icon/ispan{{m.text}}/span/templateel-menu-item v-form2 in m.modules :indexm2.url :keykey_m2.idi classm2.icon/ispan{{m2.text}}/span/el-menu-item/el-submenu 第一级节点el-submenu中key属性唯一index属性唯一而index属性用于控制菜单折叠 第二级节点el-menu-item中key属性唯一index属性唯一而index属性用于控制页面跳转 vueelement的el-menu组件实现路由跳转及当前项的设置如下 router :default-active\(route.path 然后配置路由与组件的映射关系如下 import Vue from vue import Router from vue-router import HelloWorld from /components/HelloWorld import AppMain from /components/AppMain import LeftNav from /components/LeftNav import TopNav from /components/TopNav import Login from /Views/Login import Register from /Views/Register import AddBook from /Views/book/AddBook import BookList from /Views/book/BookListVue.use(Router)export default new Router({routes: [{path: /,name: Login,component: Login}, {path: /Register,name: Register,component: Register}, {path: /AppMain,name: AppMain,component: AppMain,children: [{path: /LeftNav,name: LeftNav,component: LeftNav},{path: /TopNav,name: TopNav,component: TopNav},{path: /book/AddBook,name: AddBook,component: AddBook},{path: /book/BookList,name: BookList,component: BookList}]}] })1.3 面板内容 到这里我们就能实现面板之间的相互切换了但是面板内容是定死的所以我们需要把我们的面板内容从定死了的main换成router-view/router-view即可如下 代码如下 AppMain.vue templateel-container classmain-containerel-aside v-bind:classasideClassLeftNav/LeftNav/el-asideel-containerel-header classmain-headerTopNav/TopNav/el-headerel-main classmain-centerrouter-view/router-view/el-main/el-container/el-container /templatescript// 导入组件import TopNav from /components/TopNav.vueimport LeftNav from /components/LeftNav.vue// 导出模块export default {components:{TopNav,LeftNav},data(){return{asideClass:main-aside}},created(){this.\)root.Bus.$on(xxx,v{this.asideClass v ? main-aside-collapsed : main-aside;});}}; /script style scoped.main-container {height: 100%;width: 100%;box-sizing: border-box;}.main-aside-collapsed {/* 在CSS中通过对某一样式声明! important 可以更改默认的CSS样式优先级规则使该条样式属性声明具有最高优先级 */width: 64px !important;height: 100%;background-color: #334157;margin: 0px;}.main-aside {width: 240px !important;height: 100%;background-color: #334157;margin: 0px;}.main-header,.main-center {padding: 0px;border-left: 2px solid #333;} /style1.4 效果展示 接着我们就可以测试我们的代码了结果如下 二、动态表格 2.1 定义 动态表格是指表格的列数和内容是根据数据或用户的输入动态生成的通常用于展示不定数量的数据或根据不同的需求呈现不同的列。在前端开发中你可以使用各种框架和库来创建动态表格例如使用 Vue.js、React、Angular 等。 动态树形菜单功能已经实现接下来就是点击菜单之后面板所呈现的面板内容了如下 面板中应包含三个功能(思路) 1、搜索框 2、数据表格 3、分页条 2.2 搜索框 搜索框代码如下 !– 1.搜索框 –el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名称el-input v-modelbookname placeholder书籍名称/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form 2.3 数据表格 数据表格代码如下 !– 2.数据表格 –el-table :datatableData stripe stylewidth: 100%el-table-column propid label书籍编号 width180/el-table-columnel-table-column propbookname label书籍名称 width180/el-table-columnel-table-column propprice label书籍价格/el-table-columnel-table-column propbooktype label书籍类别/el-table-column/el-table 2.4 分页条 分页条代码如下 !– 3.分页条 –div classblockspan classdemonstration/spanel-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepage:page-sizes[10, 20, 30, 40] :page-sizerows layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div/div 2.5 功能实现 BookList.vuescript scriptexport default {data() {return {bookname: ,tableData: [],rows: 10,page: 1,total: 0}},methods: {query(params) {let url this.axios.urls.BOOK_LIST;this.axios.get(url, {params: params}).then(r {console.log®;this.tableData r.data.rows;this.total r.data.total;}).catch(e {})},onSubmit() {let params {bookname: this.bookname}this.query(params);},handleSizeChange® {//当页大小发生变化console.log(当前页大小为 r);let params {bookname: this.bookname,rows: r,page: this.page}this.query(params);},handleCurrentChange(p) {//当前页码发生变化console.log(当前页页码为 p);let params {bookname: this.bookname,rows: this.rows,page: p}this.query(params);}},created() {this.query({});}} /script 测试代码效果如下 最后使用ElementUI之动态树数据表格分页就到这里祝大家在敲代码的路上一路通畅! 感谢大家的观看 !