＜component :is=“ “/＞动态组件在 el-tab-pane里的应用

最新推荐文章于 2025-03-12 15:29:33 发布
最新推荐文章于 2025-03-12 15:29:33 发布
阅读量3.4k 收藏 11
点赞数 1
分类专栏： vue 前端开发 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012761510/article/details/125785529
版权

添加新需求时翻到了以前的代码，之前选项卡有2项，就不辞辛苦的直接写template里了。这次又新增了两个选项卡页面。于是将以前的结构翻出来直接写循环了。代码在最后面，没什么参考价值可以忽略。

本篇的目的：主要是写完后，发现此页面还有一个选项卡页面，用来切换不同的组件。（后期又被需求拿掉了，但是页面上没删。）本着代码一致的原则，就手贱的改了下。这个项目用的是element UI。在用 el-tabs数据循环的时候，如果不在el-tab-pane的结构中写DOM，最后输出的是一个字符串。尝试了一些方法后，最后用<component :is="item.content" />解决了。具体代码如下图。vue 动态组件

<template>
  <div class="app-container">
    <section v-if="false">
      <h2 id="tab" class="trendTitle">辅助分析工具</h2>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <template v-for="item in auxiliaryTool">
          <!-- 额外增加v-if="true"，不加:key标红 -->
          <el-tab-pane v-if="true" :key="item.name" :label="item.title" :name="item.name">
            <div v-if="item.isShow">
              <component :is="item.content" />
            </div>
          </el-tab-pane>
        </template>
      </el-tabs>
    </section>
  </div>
</template>

<script>
import CrossArea from '@/views/smart/crossarea/crossarea';
import Inout from '@/views/smart/inout/inout';
import Quadif from '@/views/smart/quadif/quadif';

export default {
  name: 'Trend',
  components: {
    CrossArea,
    Inout,
    Quadif,
    BasisStructure,
    TermStructure,
  },
  data() {
    return {
      activeName: '',
      auxiliaryTool: [
        {
          title: '跨1',
          name: 'crossArea',
          content: CrossArea,
          isShow: false,
        },
        {
          title: '内2',
          name: 'inout',
          content: Inout,
          isShow: false,
        },
        {
          title: '品3',
          name: 'quadif',
          content: Quadif,
          isShow: false,
        },
      ],
    };
  },
  methods: {
    handleClick(val) {
      this.auxiliaryTool = this.auxiliaryTool.map(item => {
        if (item.name === val.name) {
          item.isShow = true;
        } else {
          item.isShow = false;
        }
        return item;
      });
      this.$nextTick(() => {
        document.getElementById('tab').scrollIntoView({
          behavior: 'smooth',
          block: 'start',
        });
      });
    },    
  },
};
</script>

本文完，以下纯记录，懒得开新文了。 

记录v-for循环el-tab-pane代码

<template>
  <div class="app-container">
    <section v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="activeChart === 'first' || activeChart === 'second' ? 16 : 24">
          <h3 class="chartTitle">{{ chartTitle }}</h3>
          <el-tabs v-model="activeChart" type="card" @tab-click="handleClick2">
            <template v-for="item in tabs">
              <el-tab-pane v-if="item.hasOwnProperty('isPer') ? item.isPer : true" :key="item.name" :label="item.title" :name="item.name">
                <div v-if="activeChart === item.name">
                  <line-chart v-show="ChartBoxShow" :chart-data="lineChartData" :height="chartHeight" />
                  <el-empty v-show="!ChartBoxShow" description="暂无数据" />
                </div>
              </el-tab-pane>
            </template>
          </el-tabs>
        </el-col>
        <el-col v-if="activeChart === 'first' || activeChart === 'second'" v-hasPermi="['price:trend:query']" :span="8">
          <div v-dompurify-html.trim="coalAnalyze" class="artitle" :style="{ height: chartHeight }" />
        </el-col>
        <el-col v-if="activeChart === 'first' || activeChart === 'second'" v-hasPermi="['price:trend:query']" :span="24" class="explainBox">
          <div v-dompurify-html.trim="coalExplain" class="artitle" />
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import LineChart from '@/components/Echarts/LineCharts';
import { coalIndex, getGraph, getGraph2, getPreIindex, getReport } from '@/api/trend';
import { debounce, getTime, setMyOpts, sortSeriesByMaxValue } from '@/utils/global.js';

export default {
  name: 'Trend',
  components: {
    LineChart,
  },
  data() {
    return {
      loading: true, // 遮罩层
      isPer: false, //判断是否具有某个权限
      // 图表
      chartTitle: '标题',
      chartHeight: '0', //设置图表高度
      lineChartData: {}, // 图表数据
      ChartBoxShow: true, //图表有无数据，是否显示
      // 解释文字/后台输出的文字内容
      coalAnalyze: '',
      coalExplain: '',
      // 选项卡
      activeChart: this.isPer ? 'second' : 'three',
      tabs: [
        {
          title: '总预测趋势图',
          name: 'first',
          isPer: false,
        },
        {
          title: '区间预测图',
          name: 'second',
          isPer: false,
        },
        {
          title: '预测指数图',
          name: 'three',
        },
        {
          title: '周环比分析图',
          name: 'four',
        },
      ],
    };
  },
  computed: {
    permissions() {
      return this.$store.getters.permissions;
    },
  },
  watch: {
    isPer: {
      handler: function(newVal) {
        this.tabs = this.tabs.map(item => {
          if (item.hasOwnProperty('isPer')) {
            item['isPer'] = newVal;
          }
          return item;
        });
      },
      deep: true,
    },
  },
  created() {
    this.isPer = this.permissions.some(permission => {
      return '*:*:*' === permission || ['price:trend:query'].includes(permission);
    });
    this.activeChart = this.isPer ? 'second' : 'three';
    // 设置图表高度
    this.setChartHeight();
    // 提交表单
    this.getSubmit(this.queryParams);
    this.getSubmit = debounce(function(data) {
      this.handleClick2({ name: this.activeChart });
      getReport().then(res => {
        this.coalExplain = res.data
          .map(item => {
            if (!item.title.includes('分析')) {
              return `
            <h3>${item.title.includes('、') ? item.title.split('、')[1] : item.title}</h3>
            <p>${item.desc.replace(/\r\n/gm, '<br/>')}</p>
            `;
            }
          })
          .join('');
        this.coalAnalyze = res.data
          .map(item => {
            if (item.title.includes('分析')) {
              return `
            <h3>${item.title.includes('、') ? item.title.split('、')[1] : item.title}</h3>
            <p>${item.desc.replace(/\r\n/gm, '<br/>')}</p>
            `;
            }
          })
          .join('');
      });
    });
  },
  methods: {
    handleClick2(val) {
      let obj = {
        first: {
          title: '1',
          api: getGraph,
        },
        second: {
          title: '1',
          api: getGraph2,
        },
        three: {
          title: '2',
          api: getPreIindex,
        },
        four: {
          title: '3',
          api: getPreIindex,
        },
        // four: () => {
        //   return new Promise(async resolve => {
        //     this.chartTitle = '周环比分析';
        //     this.loading = true;
        //     let res = getPreIindex();
        //     resolve(res);
        //   });
        // },
      };
      if (!obj[val.name].title || !obj[val.name].api) {
        return;
      }
      this.getCharts(obj[val.name].title, obj[val.name].api).then(({ res, title }) => {
        this.loading = false;
        this.chartTitle = title;
        this.ChartBoxShow = res['data'] ? true : false;
        if (this.ChartBoxShow) {
          let myChart = this.$store.state.echarts.init[0];
          const customObj = {
            first: {
              title: {
                subtext: '',
              },
              legend: {
                top: '34px',
                right: 'auto',
                orient: 'horizontal',
              },
              grid: {
                width: '72%',
                top: '76px',
                left: '38',
              },
              series: item => {
                if (item.type === 'scatter') {
                  if (typeof item.label.formatter == 'string') {
                    return {
                      color: 'rgb(231,90,110)',
                      label: {
                        backgroundColor: 'rgba(231,90,110,.3)',
                      },
                      labelLayout: {
                        with: 160,
                        x: myChart.getWidth() - 120,
                        draggable: true,
                        verticalAlign: 'middle',
                      },
                      markPoint: null,
                      markLine: null,
                    };
                  }
                  return {
                    labelLayout() {
                      return {
                        width: typeof item.label.formatter == 'string' ? 160 : 140,
                        x: myChart.getWidth() - 120,
                        draggable: true,
                        verticalAlign: 'middle',
                      };
                    },
                    markPoint: null,
                    markLine: null,
                  };
                } else {
                  if (item.name.includes('动力煤连续合约')) {
                    return {
                      markLine: null,
                      markPoint: {
                        symbol: 'circle',
                        symbolSize: 10,
                        label: {
                          show: false,
                        },
                      },
                    };
                  }
                  return {
                    markPoint: null,
                    markLine: null,
                  };
                }
              },
            },
            second: {
              legend: {
                top: '48px',
                right: 'auto',
                orient: 'horizontal',
              },
              grid: {
                width: '72%',
                top: '76px',
                left: '38',
              },
              series: item => {
                if (item.type === 'scatter') {
                  if (typeof item.label.formatter == 'string') {
                    return {
                      color: 'rgb(231,90,110)',
                      label: {
                        backgroundColor: 'rgba(231,90,110,.3)',
                      },
                      labelLayout: {
                        with: 160,
                        x: myChart.getWidth() - 120,
                        draggable: true,
                        verticalAlign: 'middle',
                      },
                      markPoint: null,
                      markLine: null,
                    };
                  }
                  return {
                    labelLayout: {
                      with: 140,
                      x: myChart.getWidth() - 120,
                      draggable: true,
                      verticalAlign: 'middle',
                    },
                    markPoint: null,
                    markLine: null,
                  };
                } else {
                  if (item.name.includes('动力煤连续合约')) {
                    return {
                      markLine: null,
                      markPoint: {
                        symbol: 'circle',
                        symbolSize: 10,
                        label: {
                          show: false,
                        },
                      },
                    };
                  }
                  if (item.name.includes('预测值上限') || item.name.includes('预测值下限')) {
                    return {
                      itemStyle: {
                        color: '#aaaaaa',
                        borderColor: '#aaaaaa',
                      },
                      lineStyle: {
                        color: '#aaaaaa',
                      },
                      markPoint: null,
                      markLine: null,
                    };
                  }
                  return {
                    markPoint: null,
                    markLine: null,
                  };
                }
              },
            },
            three: {
              legend: {
                top: '48px',
                right: 'auto',
                orient: 'horizontal',
              },
              grid: {
                width: '96%',
                top: '76px',
                left: '38',
              },
              yAxis: [
                {
                  name: '',
                },
              ],
              series: item => {
                if (item.type === 'scatter') {
                  return {
                    labelLayout: {
                      with: 140,
                      x: myChart.getWidth() - 120,
                      draggable: true,
                      verticalAlign: 'middle',
                    },
                    markPoint: null,
                    markLine: null,
                  };
                } else {
                  return {
                    markPoint: null,
                    markLine: null,
                  };
                }
              },
            },
            four: {
              legend: {
                top: '48px',
                right: 'auto',
                orient: 'horizontal',
              },
              grid: {
                width: '96%',
                top: '76px',
                left: '38',
              },
              yAxis: [
                {
                  name: '',
                },
              ],
              series: item => {
                if (item.type === 'scatter') {
                  return {
                    labelLayout: {
                      with: 140,
                      x: myChart.getWidth() - 120,
                      draggable: true,
                      verticalAlign: 'middle',
                    },
                    markPoint: null,
                    markLine: null,
                  };
                } else {
                  return {
                    markPoint: null,
                    markLine: null,
                  };
                }
              },
            },
          };
          let custom = customObj[val.name];
          this.lineChartData = setMyOpts(sortSeriesByMaxValue(res['data']), custom);
        }
      });
    },
    getCharts(title, api) {
      return new Promise(async resolve => {
        if (typeof api == 'function') {
          this.loading = true;
          let res = await api();
          resolve({ res, title });
        }
      });
    },  
    setChartHeight() {
      // 设置图表高度
      let halfWidth = (document.documentElement.clientWidth / 2) * 0.74;
      this.chartHeight = (halfWidth / 4) * 3 + 'px';
      window.onresize = () => {
        return (() => {
          halfWidth = (document.documentElement.clientWidth / 2) * 0.74;
          this.chartHeight = (halfWidth / 4) * 3 + 'px';
        })();
      };
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/explain.scss';
.chartTitle {
  text-align: center;
  @include themeify {
    color: themed('main-font-color');
  }
}
.formBox {
  margin: 0 0 30px;
}
.explainBox {
  margin-top: 30px;
}
::v-deep .artitle {
  margin-top: 0;
  font-size: 16px;
}
::v-deep .artitle h3 {
  margin: 6px auto 14px;
  text-indent: 0;
  font-size: 24px;
  // font-weight: normal;
}
::v-deep .artitle p {
  width: 98%;
  line-height: 2;
  margin: 10px auto;
  text-indent: 0;
}
.trendTitle {
  margin: 50px 0 20px;
  text-align: left;
  @include themeify {
    color: themed('main-font-color');
  }
}
.rangeSeparator {
  display: inline-block;
  height: 100%;
  padding: 0 5px;
  margin: 0;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  width: 5%;
  @include themeify {
    color: themed('main-font-color');
  }
}
</style>

el-tabs和＜component＞配合，实现tab栏的切换效果
heiKeWangZi1368的博客
03-09 4151
component 标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。标签里的is属性值是对应的组件名称。 component标签详细使用方法：https://blog.csdn.net/liangmengbk/article/details/85013547 是element的ui组件，通过@tab-click方法，改变is的值` <template> <div class="tabBox"> <el-tabs v-m
vue2.* element tabs tab-pane 动态加载组件操作
10-15
主要介绍了vue2.* element tabs tab-pane 动态加载组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue内置组件component--通过is属性动态渲染组件操作
10-15
主要介绍了vue内置组件component--通过is属性动态渲染组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 动态组件【详解】component :is
热门推荐
朝阳39的博客
12-31 4万+
vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为： <component :is="componentTag"></component> data() { return { componentTag: '', } }, componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在<component />标签出现的位置，渲染该组件。 完整范例代码 <template>
el-tabs和el-tab-pane的联合使用
xiao18180abc的博客
03-12 290
el-tabs可以理解为导航栏列表，而el-tab-pane则是列表里的每个标签栏，name对应着它的标识，而v-model="activeTab"是对应的绑定值，我这里的默认是第一个功德，所以是这样写。如果想要切换的话，可以点击对应的订单，这时候"activeTab"会切换成order，就自动跳到另外的页签了。el-tabs和el-tab-pane的联合使用。
el-tabs如何切换组件，动态切换
ZZZZZZZZjy的博客
12-06 3120
v-if用于根据条件判断是否渲染指定的元素或组件，里的条件是"activeName === item.name"，即当组件的name属性值与当前激活的标签页名称(activeName)相同时，才渲染该组件。而v-bind(:)用于动态绑定属性值，这里的属性是"is"，它指定了要渲染的组件类型，即item.components，表示渲染当前标签页对应的组件。
element标签页tabs二次封装（vue动态组件）
陈新科的博客
01-03 2885
当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。当组件被激活时，会自动触发组件的 activated 生命周期函数。默认情况下，vue切换动态组件时无法保持组件的状态。include 属性用来指定：只有名称匹配的组件会被缓存。vue 提供了一个内置的组件，专门用来实现动态组件的渲染。循环遍历标签页，其中的if判断用于解决切换页面闪烁问题。这里用到vue的混入，方便多个页面直接引用相关代码。keep-alive 对应的生命周期函数。
＜component :is=““＞
m0_63498559的博客
11-27 343
defineOptions({ components:{ test1, test2, test3, test4, } }) const dragList = reactive([ { id: 1, name: 'test1' }, { id: 2, name: 'test2' } ]) 解决<component :is="dragList[1].name">不显示问题。 直接写成 const dragList = react
Vue动态组件 ＜component :is=“XXX“＞＜/component＞
黎小小的博客
10-21 586
注意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。如 a标签 <component is="a" href="XXX.baidu.com"></component>，通过 Vue 的 元素加一个特殊的 is attribute 实现。currentPage可以包括已注册组件的名字，或一个组件的选项对象。
<template> <div id="app"> <el-tabs type="border-card"> <el-tab-pane :label='item' v-for="(item, index) in components" :key="index" @click="itemClick(item)"> <component :is="current" @homeClick="homeClick"></component> </el-tab-pane> </el-tabs> </div> </template> <script> import txst from './components/txst.vue' import pp from './components/pp.vue' import prab from './components/prab.vue' export default { components: { txst, pp, prab }, data() { return { components: ['txst', 'pp','prab'], current:'txst' } }, methods: { itemClick(tab){ this.current = tab }, homeClick(payload){ console.log("homeClick:", payload) } }, } </script> <style> </style>
07-25
在 `<component>` 中，你使用了 `:is` 属性来动态绑定当前选中的组件。 你只需要在模板中添加对应的组件标签，并在 `components` 中引入相应的组件即可。例如，在模板中添加 `<txst>`、`<pp>` 和 `<prab>` 标签，并...
<template> <slide-view v-empty="!canShowDetail" :listener-ids="listenerIDs" :no-listener-ids="noListenerIDs" :no-listener-class="noListenerClass" :body-style="{padding: 0, height: '100%'}" xs-empty-icon="nopermission" xs-empty-text="暂无权限" @afterEnter="viewAfterEnter" @close="hideView"> <div v-loading="loading" ref="crmDetailMain" class="detail-main"> <flexbox v-if="canShowDetail && detailData" direction="column" align="stretch" class="d-container"> <c-r-m-detail-head :detail="detailData" :head-details="headDetails" :id="id" :crm-type="crmType" :page-list="pageList" @pageChange="pageChange" @handle-click="deadHandleClick" @handle="detailHeadHandle" @close="hideView"> <template slot="name"> <span v-if="detailData.checkStatus == 8" class="is-invalid">（已作废）</span> </template> </c-r-m-detail-head> <examine-info v-if="detailData.examineRecordId" :id="id" :record-id="detailData.examineRecordId" :owner-user-id="detailData.ownerUserId" class="examine-info" examine-type="crm_contract" @on-handle="examineHandle"/> <div class="d-container-bd"> <el-tabs v-model="tabCurrentName" type="border-card" class="d-container-bd--left"> <el-tab-pane v-for="(item, index) in tabNames" :key="index" :label="item.label" :name="item.name" lazy> <component :is="item.name" :detail="detailData" :type-list="logTyps" :id="id" :handle="activityHandle" :crm-type="crmType" @handle="detailHeadHandle" /> </el-tab-pane>
最新发布
03-16
<think>好的，我现在需要帮助用户解决关于Vue.js中slide-view组件和c-r-m-detail-head组件的实现细节及用法示例的问题。首先，我需要确认用户提到的这两个组件是否是Vue.js官方提供的，或者是否属于第三方组件。根据...
vue-动态组件（:is=“组件名“）
muzidigbig的博客
11-27 7415
通过使用保留的<component>元素，动态地绑定到它的is特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据v-bind:is="组件名" 中的组件名去自动匹配组件 也是是一个组件对象，如果匹配不到则不显示。 改变挂载的组件，只需要修改is指令的值即可。 father.vue <template> <div> <h2>动态组件</h2> <button type="button" @click...
＜component :is=“...“＞和＜slot＞用法，动态组件
qq_36434345的博客
10-09 821
slot && component
Vue动态组件 component :is的使用
qq_44342031的博客
01-10 1万+
Vue动态组件 component :is的使用
vue-cli+elment-ui 标签页动态加载组件(el-tabs)
VVVVV
04-03 4438
用到的组件 el-tabs标签页，<component>标签，用:is切换加载 功能 动态切换标签页并显示不同组件内容 效果图 标题实现代码 //.vue单文件 <template> <div :class="bemCss('tabs')"> <el-tabs v-model="activeName" @tab-click="handleCl...
请解释＜component :is=“item.icon“ /＞这句代码含义
fury的博客
01-16 1128
而是需要使用component :is写法.因为本文用的是element-plus,所以我们不能直接用{{}},官方el-icon的用法。为什么不使用下面的写法。
Vue动态组件(component :is)-＜component :is=““＞＜/component＞- 案例
JackieDYH的博客
12-01 3430
component is
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值