代码:
<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.username
this.otherUserInfo = JSON.parse(JSON.stringify(res.data))
this.userInfo = res.data
console.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来显示上面的可选栏。
对应的效果图:
文章来源:https://www.toymoban.com/news/detail-510825.html
基本的用法 具体可参考官网。文章来源地址https://www.toymoban.com/news/detail-510825.html
到了这里,关于Element-ui tab栏的切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!