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 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
PHP中对数据库操作的封装
2006/10/09 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
浅析Vue中method与computed的区别
2018/03/06 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python super的使用方法及实例详解
2019/09/25 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Java中实现多态的机制
2015/08/09 面试题
政府采购方案
2014/06/12 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python