vue 动态增加 el-date-picker

要在Vue中动态增加el-date-picker，你可以使用Vue的动态组件和v-if指令来实现。首先，你需要在Vue实例的data属性中定义一个变量，用于判断是否需要动态增加el-date-picker组件。比如，你可以定义一个名为"showDatePicker"的变量，初始值为false。

然后，在你需要动态增加el-date-picker的地方，你可以使用v-if指令来根据"showDatePicker"变量的值来判断是否显示el-date-picker组件。例如，你可以在一个按钮的点击事件中，将"showDatePicker"变量的值设置为true，从而动态地增加el-date-picker组件。代码如下：

<template>
  <div>
    <button @click="showDatePicker = true">动态增加el-date-picker</button>
    <el-date-picker v-if="showDatePicker" value-format="yyyy-MM-dd HH:mm:ss" v-model="excelRuleForm.dynamicTime" type="datetime" :placeholder="选择时间"></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDatePicker: false,
      excelRuleForm: {
        dynamicTime: '' // 用于存储动态添加的时间
      }
    };
  }
};
</script>

在上面的代码中，当点击按钮时，"showDatePicker"变量的值会变为true，从而触发el-date-picker组件的显示。同时，你可以使用"excelRuleForm.dynamicTime"来获取动态添加的时间值。

这样，你就可以在Vue中动态增加el-date-picker组件了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue element-ui el-date-picker限制选择时间为当天之前的代码](https://download.csdn.net/download/weixin_38569722/12932458)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue中的el-date-picker时间选择器的使用](https://blog.csdn.net/qq_36256590/article/details/131550180)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]