Element-ui tab栏的切换

这篇具有很好参考价值的文章主要介绍了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.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来显示上面的可选栏。

对应的效果图:

Element-ui tab栏的切换

 基本的用法 具体可参考官网。文章来源地址https://www.toymoban.com/news/detail-510825.html

到了这里,关于Element-ui tab栏的切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • slot插槽及Element-ui 中<template slot-scope=“scope“>

    slot-scope=“scope” //取到当前单元格 scope.$index //拿到当前行的index scope.row //拿到当前行的数据对象 scope.row.date //是对象里面的data属性的值 插槽有三种:默认插槽、具名插槽、作用域插槽。 2.1 vue的slot默认插槽、具名插槽 假如一个组件里面需要多个插槽。我们怎么来区分多个

    2024年02月02日
    浏览(50)
  • Element-ui中el-tabs的下划线样式微调

    1.页面加载周期结束之后调用方法          2.写这个方法 3.el-tabs上绑定ref就可以了          4.结果:下划线就可以向左边偏移一点了,看起来更好看  

    2024年02月11日
    浏览(34)
  • Element ui tabs组件左右箭头切换 (第一项为固定项)

    之前发布过一篇关于切换的 但是有点瑕疵 这次补充一下 data里没啥可看的 就是要渲染的数据定义 在生命周期里刚开始的时候判断了一下 看是否添加固定项 因为我这个是组件 这个是判断条数低于几条的时候不展示左右箭头 有需求的话看是开局就添加还是监测到数据了在触发

    2024年02月01日
    浏览(47)
  • 解决element ui中el-tabs标签点击切换闪屏问题

    现象:点击切换 element ui中el-tabs时候,table会出现闪一下的状况; 初始element ui中el-tabs组件代码如下: 使用v-if=\\\"activeName===\\\'first\\\'\\\" 解决闪屏   改造后代码如下:

    2024年02月07日
    浏览(47)
  • 关于修改element-ui中Tabs标签页选中标签下划线缩短居中效果的实现方法

    需求描述: 下划线需要改为原来的一半,并且可以根据元素长度动态更换长度。 原样式: 改为以下样式: 思路如下 :element-ui通过一个独立的元素实现tab间切换能够达到下划线滑动的动态效果,所以将下划线独立为一个元素,并非使用tab自身的盒子设置下边框的样式去实现

    2024年02月12日
    浏览(42)
  • 【element-ui 中 el-tabs+el-menu 实现点击菜单 新增导航tab页 并实现关闭其他、当前、所有的功能】

    element-ui 【el-tabs+el-menu 实现点击菜单 新增导航tab页 并实现关闭其他、当前、所有的功能】 文章分3个部分 el-tabs 以及右击菜单代码 vuex 代码及其方法实现 router路由信息常规写法el-menu写法常规(自行去掉修饰部分) el-tabs 以及右击菜单代码

    2024年02月11日
    浏览(56)
  • 通过JavaScript、css、H5 实现简单的tab栏的切换和复用

    目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 1.我们先通过css 和h5布局得到最基本的tab栏样式(有代码参考) 2.在获得样式,给我们所需要点击的目标设置监听事件,在获取节点,设置一个自定义的节点属性index,通过它在获取

    2023年04月09日
    浏览(38)
  • vue使用element-ui 实现多套自定义主题快速切换

    下载到本地项目文件 配置所需主题样式文件和className,例如上面代码:theme-black、theme-blue… 在根目录执行以下命令:

    2024年02月11日
    浏览(47)
  • Element-UI侧边导航栏切换展示不同的右侧主体内容

    在用element做侧边栏遇到的问题,如果给每个按钮绑定一个值去用if判断有点麻烦了 这个时候可以用路由 1、开启导航栏的路由 但是直接给每个选项用router是会报错的 看了下文档,是给 el-menu这个标签来一个router的属性 那么为true的时候就是开启这个导航栏的路由了    但是直

    2024年02月04日
    浏览(47)
  • element-ui:多个el-dialog弹框切换会出现闪烁

    使用多个element-ui组件el-dialog弹框切换 打开A弹框,点击关闭,紧接着打开B弹框 会出现一个明显的闪烁 给第一个弹框关闭加一点延迟 参考 【ElementUI】dialog弹窗出现闪屏问题解决办法

    2024年02月11日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包