该笔记总结于b站

Vue+Element项目实战

1.vue的的组件化应用

在需要使用组件的地方进行引入


import DepMana from '../../components/sys/DepMana.vue';
import EcMana from '../../components/sys/EcMana.vue';import JobLevelMana from '../../components/sys/JobLevelMana.vue';import PosMana from '../../components/sys/PosMana.vue';import PermissionMana from '../../components/sys/PermissionMana.vue';

导入组件的名字,注意一下它是在data函数的外面!!!

export default {name:"SysBasic",// 这个自定义的组件需要写在data的外面components:{DepMana,JobLevelMana,EcMana,PosMana,PermissionMana},data(){return{}
}

在需要显示的地方加上如下的code:


<template><el-tabs v-model="activeName" type="card"><el-tab-pane label="职称管理" name="DepMana"><dep-mana></dep-mana></el-tab-pane><el-tab-pane label="部门管理" name="PosMana"><pos-mana></pos-mana></el-tab-pane><el-tab-pane label="职称管理" name="JobLevelMana"><job-level-mana></job-level-mana> </el-tab-pane><el-tab-pane label="奖惩管理" name="EcMana"><ec-mana></ec-mana></el-tab-pane><!-- 需要注意name不可以重复 --><el-tab-pane label="权限组" name="PermissionMana"><permission-mana></permission-mana></el-tab-pane></el-tabs>
</template>

v-model=“activeName”
这个是浏览器进行默认显示的组件，我们可以在data中进行数据的绑定操作。

 // 组件化默认的位置activeName:"DepMana",

2.使用ElementUI实现侧边的导航栏

3.实现相关的增删改查的操作(暂时省略)。

4.相关的一些使用的技巧（按下回车的键盘点击操作实现添加，编辑时候的数据显示问题）

@keydown.enter.native=“” 事件，加上这个可以通过回车进行添加的操作

  <el-inputsize="small"icon="el-icon-circle-plus"placeholder="输入要添加的职位"v-model="post.name"@keydown.enter.native="addPosition"style="width:200px"></el-input><el-button size="small" icon="el-icon-plus" type="primary"  style="margin-left:8px;" @click="addPostions">添加</el-button>

5.前端的一些使用技巧。

ElementUI+Vue实现tab页面相关推荐

【Vue实用功能】Vue实现tab页多页面切换
Vue实现tab页多页面切换实现路由发生变化时,新增一个tab标签页,点击其他标签时切换到对应的页面,刷新网页同时保留状态这里就直接说它实现的代码就OK!!! VueX记录下每次新增后的tab标签 ...
vue tab页面缓存处理
vue tab页面缓存处理问题:使用vant 框架.底部导航切换,tab页面缓存解决: 1.index 页面 xml 设置 <keep-alive><router-view v- ...
Vue+ElementUi 项目中将页面内容转为 Word文档下载
Vue+ElementUi 项目中将页面内容转为 Word文档下载需要提前做好的现成模板(魔板个页面基本上相同的内容)-模板内有变量,替换成页面对应的数据 HTML页面: 转换的word 以下是正 ...
webpack服务器性能,高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui...
接上篇本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! element-ui 介绍饿了么前端开发组件框架 ...
vue 前端进行tab页面切换时，要求不刷新
项目中TagsView组件用于tab页面切换,在项目中已使用keep-alive,目标页面也开启了"缓存"标志,但是在tab标签点击切换时,有几个页面数据还是刷新了.查找了相关资料 ...
EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
EasyDSS流媒体解决方案总体可划分成三个部分:前端视频源设备(PC.手机.摄像机)流媒体数据获取并即时回传.流媒体服务器端直播和录像与回放.客户端直播播放与录像检索回放.前端推流我们使用跨平台的R ...
elementUI vue页面代码
<img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt= ...
Vue集成Iframe页面
2019独角兽企业重金招聘Python工程师标准>>> 1. 项目需求我们切换为vue框架是后面的事情,之前还有一些功能页面是用jsp页面写的,而我们的管理系统需要既支持Vue的u ...
Java快速开发平台，JEECG 3.7.5 Vue SPA单页面应用版本发布
JEECG 3.7.5 Vue SPA单页面应用版本发布导读 ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...

ElementUI+Vue实现tab页面

文章目录

该笔记总结于b站

1.vue的的组件化应用

2.使用ElementUI实现侧边的导航栏

3.实现相关的增删改查的操作(暂时省略)。

4.相关的一些使用的技巧（按下回车的键盘点击操作实现添加，编辑时候的数据显示问题）

5.前端的一些使用技巧。

ElementUI+Vue实现tab页面相关推荐

最新文章

热门文章