vue2.* element tabs tab-pane 动态加载组件操作


Posted in Javascript onJuly 19, 2020

一、重要部分

1、 注意 <component :is=item.content></component> :表明模板

<el-tab-pane
     v-for="(item) in editableTabs"
     :key="item.name"
     :label="item.title"
     :name="item.name"
    >
     <component :is=item.content></component>
 </el-tab-pane>

2、content: 'Jbxx' ,其中 jbxx 是 模板

addTab (targetName, route) {
   let newTabName = ++this.tabIndex + ''
   this.editableTabs.push({
    title: targetName,
    name: newTabName,
    content: 'Jbxx'
   })
   this.editableTabsValue = newTabName
   if (targetName === '基本信息') {
    this.show = true
   } else {
    this.show = false
   }
   // this.$router.push({
   //  path: route
   // })
  }

二、完整代码

<template>
   <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
    <el-tab-pane
     v-for="(item) in editableTabs"
     :key="item.name"
     :label="item.title"
     :name="item.name"
    >
     <component :is=item.content></component>
    </el-tab-pane>
   </el-tabs>
</template>
 
<script>
import VueEvent from '../model/VueEvent.js'
import Jbxx from './jgxx/Jbxx'
 
export default {
 data () {
  return {
   show: false,
   editableTabsValue: '2',
   editableTabs: [{
    title: 'Tab 1',
    name: '1',
    content: ''
   }, {
    title: 'Tab 2',
    name: '2',
    content: ''
   }],
   tabIndex: 2
  }
 },
 methods: {
  addTab (targetName, route) {
   let newTabName = ++this.tabIndex + ''
   this.editableTabs.push({
    title: targetName,
    name: newTabName,
    content: 'Jbxx'
   })
   this.editableTabsValue = newTabName
   if (targetName === '基本信息') {
    this.show = true
   } else {
    this.show = false
   }
   // this.$router.push({
   //  path: route
   // })
  },
  removeTab (targetName) {
   let tabs = this.editableTabs
   let activeName = this.editableTabsValue
   if (activeName === targetName) {
    tabs.forEach((tab, index) => {
     if (tab.name === targetName) {
      let nextTab = tabs[index + 1] || tabs[index - 1]
      if (nextTab) {
       activeName = nextTab.name
      }
     }
    })
   }
   this.editableTabsValue = activeName
   this.editableTabs = tabs.filter(tab => tab.name !== targetName)
  }
 },
 mounted () {
  VueEvent.$on('to-main', (name, route) => {
   this.addTab(name, route)
  })
 },
 components: {
  Jbxx
 }
}
</script>
<style scoped>
</style>

补充知识:在vue中使用elementUI饿了么框架使用el-tabs,切换Tab如何实现实时加载,以及el-table表格使用总结...

当我们在开发中遇到tab切换,这时候用el的el-tabs感觉很方便

但当我在把代码都写完后,发现一个问题就是页面打开时

虽然我们只能看见当前一个tab页,但是vue会帮你把你写的所有tab页的内容都渲染出来了,只是其他的隐藏了,同时其他tab的js也都走了一边,当你点击tab时js就不会再去请求后台

这种机制会造成一个问题,就是如果每个tab页的数据都过大的时候,可能就会导致首次打开页面卡顿现象,同时如果数据库数据在实时发生变化的话,比如你一分钟前打开的这个页面,看的是tab1的内容,看了1分钟后我想看tab2的内容,但此时tab2的内容后台数据库已经发生变化了,你能看到的只是1分钟前的数据,那该怎么解决这个问题呢?

首先一开始一次加载所有tab的代码是这样的↓

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
   <el-tab-pane label="待处理" name="first">
    <processed/> <!--这里是自定义的子模块,也就是自定义组件-->
   </el-tab-pane>
   <el-tab-pane label="已处理" name="second">
    <un-processed/>
   </el-tab-pane>
</el-tabs>

这时候v-if的作用就可以发挥出来了,当v-if的值为false时vue是不会去渲染该标签下的内容的

那我们就把tabs下的子模块标签上加v-if,一开始只设置其中一个为true其他都为false,当点击tab切换时去改变v-if的值,代码如下↓

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
   <el-tab-pane label="待处理" name="first" :key="'first'">
    <processed v-if="isFirst"/>
   </el-tab-pane>
   <el-tab-pane label="已处理" name="second" :key="'second'">
    <un-processed v-if="isSecond"/>
   </el-tab-pane>
  </el-tabs>

js的代码↓

<script>
import Breadcrumb from '@/components/Breadcrumb'
import Processed from './processed'
import UnProcessed from './unprocessed'
export default {
 components: {
  Breadcrumb,
  Processed,
  UnProcessed
 },
 data() {
  return {
   // 默认第一个Tab
   activeName: 'first',
   isFirst: true,
   isSecond: false
  }
 },
 methods: {
  handleClick(tab) {
   if (tab.name === 'first') {
    this.isFirst = true
    this.isSecond = false
   } else if (tab.name === 'second') {
    this.isFirst = false
    this.isSecond = true
   }
  }
 }
}
</script>

这样就可以完美解决上面的问题,首次加载页面只会渲染其中一个tab的内容,同时点击tab切换时页面重新渲染页面,good!

el-table中动态表头的写法

其实就是一个v-for循环,根据后台返回数据生成对应表头

<el-table-column v-for="item in 
      tableHeader"
       :key="item.key"
       :prop="item.key"
       :label="item.name"
       :formatter="item.formatter"
       align="center"
       show-overflow-tooltip></el-table-column>

js里的数据绑定:

tableHeader: [
    {
     name: '手机号码',
     key: 'partnerPhone'
    },
    {
     name: '姓名',
     key: 'partnerName'
    },
    {
     name: '职位',
     key: 'position',
     formatter: this.posFormatter
    },
    {
     name: '团队',
     key: 'teamName'
    },
    {
     name: '代理商',
     key: 'agentName'
    },
    {
     name: '状态',
     key: 'state',
     formatter: this.stFormatter
    }
   ]

以上这篇vue2.* element tabs tab-pane 动态加载组件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 #Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 #Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 #Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 #Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 #Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 #Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 #Javascript
You might like
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
JavaScript 指导方针
2007/04/05 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
python绘制双柱形图代码实例
2017/12/14 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python闭包函数定义与用法分析
2018/07/20 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
租车协议书范本
2014/04/22 职场文书
质量提升方案
2014/06/16 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server