同一页面多次引用同一组件

最新推荐文章于 2023-11-15 15:00:20 发布

天使的同类

最新推荐文章于 2023-11-15 15:00:20 发布

阅读量2.6k

点赞数

分类专栏： element vue.js 文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/summer_jk/article/details/124836164

版权

本文介绍如何在Vue.js应用中，当同一页面内多次引用同一组件时，为不同实例设置不同的默认日期。例如，一个页面包含两个表单组件，每个组件在切换tab时显示不同默认日期：tab1显示近一周，tab2显示近一个月。

摘要由CSDN通过智能技术生成

同一页面多次引用同一组件实现日期默认值

需求：在一个页面内引入两次form表单组件，在tab切换时，tab1默认近一周的日期，tab2默认近一个月的日期

子组件：

<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="form.time">
          <el-option label="近一周" value="weeks"></el-option>
          <el-option label="近一个月" value="months"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          v-model="form.value"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>