Element-ui tab栏的切换

代码:

<template><div class=""><h3>{{ id }}</h3><div class="detail"><el-card><el-tabs><el-tab-pane label="登录账户设置"><el-form ref="form" label-width="80px" :model="form" :rules="rules"><el-form-item label="姓名" prop="username"><el-input v-model="form.username" /></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password" type="password" /></el-form-item><el-form-item><el-button type="primary" @click="submit">更新</el-button><el-button @click="back">取消</el-button></el-form-item></el-form></el-tab-pane><el-tab-pane label="个人详情" lazy><!-- 动态组件 --><Info :user-info="userInfo" /></el-tab-pane><el-tab-pane label="岗位详情" lazy>岗位详情</el-tab-pane></el-tabs></el-card></div></div>
</template><script>
import Info from './components/info.vue'
import { sysUser, sysUserPut } from '@/api/user.js'
export default {name: '',components: {Info},data() {return {otherUserInfo: {},id: this.$route.params.id,form: {username: '',password: '1232'},rules: {username: { required: true, message: '必填', trigger: 'change' },password: { required: true, message: '必填', trigger: 'change' }},userInfo: ''}},created() {this.getData()},methods: {back() {this.$router.push('/employees')},async getData() {const res = await sysUser(this.id)this.form.username = res.data.usernamethis.otherUserInfo = JSON.parse(JSON.stringify(res.data))this.userInfo = res.dataconsole.log(res)},submit() {this.$refs.form.validate(async(result) => {if (result) {// 1.{...obja,...objb}await sysUserPut({ ...this.userInfo, ...this.form })this.otherUserInfo.username = this.form.username// 提示this.$message.success('修改成功')}})}}
}
</script><style lang="scss" scoped>
.detail {padding: 15px;
}
</style>

解析:使用el-tabs进行包裹,使用el-tab-pan来显示上面的可选栏。

对应的效果图:

基本的用法具体可参考官网。

Element-ui tab栏的切换相关推荐

tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name= ...
JavaScript基础 - 经典案例3 - tab栏选项卡切换
通常我们用 js 写 tab 栏切换功能会用到排他思想,即干掉其他人,留下我自己但也可以用一个更有效率的方法:找出那个特殊的人,精准干掉他,放过其他无辜的人,然后留下我自己实现过程:假设需要切换 ...
js实现tab栏的切换
目录实现点击变色效果: 点击之后下面的内容跟着变化全部代码: 最后: 界面效果图如上,点击第二栏后第二栏变为红色,下面显示第二栏的内容. html代码:如下 <header class=&q ...
纯CSS实现Tab栏的切换
思路利用input标签的radio类型中的checked属性控制当前选中tab 隐藏radio的显示,用label标签的for属性关联radio,对label进行样式编写实现tab栏的自定义. 一个 ...
element UI tab拖曳
SortableJS :javascript 拖曳库,有多牛我就不吹了,反正就是简单 · 好用安装 npm install sortablejs --save 引入 i ...
tab栏的切换【DOM点击事件】
不太美观,但是想把这段js代码放上来,自己翻着玩. <style type="text/css"> .Box { width: 240px; border: 1px s ...
JavaScript简单的Tab栏导航——切换页面
这是昨天的一个课堂练习,简单展示一下!做的是一个简单的页面交互效果,呈现一种内嵌效果.效果图如下: 首先直接看一下它的js代码吧,在不一样的皮囊里藏着千篇一律的灵魂,主要是要体会从中的for循坏绑定点 ...
AUI tab实现页签滑动切换且下拉刷新（下拉固定title栏及tab栏）
声明:菜鸟一枚,入坑不久,如有欠缺,望大神给予好的建议,完善优化,分享他人. AUI tab实现页签滑动切换且下拉刷新(下拉固定title栏及tab栏) 1:aui tab分页签,手动侧滑或点击TAB ...
H5+CSS+JS Tab导航栏自动切换
传智播客教材案例功能删改 html5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"" ...

Element-ui tab栏的切换

Element-ui tab栏的切换相关推荐

最新文章

热门文章