<el-form-item label="时段2" style="margin-top: 15px"> <el-col :span="22"> <el-date-picker v-model="timeParam" start-placeholder="开始时间" end-placeholder="结束时间" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" /> </el-col> </el-form-item>动态加入到页面vue3

你可以使用Vue3的Composition API来实现动态添加HTML标签。

假设你有以下模板：

<template>
  <div>
    <div ref="form"></div>
    <button @click="addFormItem">添加表单项</button>
  </div>
</template>

你可以在setup函数中定义一个formItems数组和一个addFormItem方法来动态添加表单项：

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const formItems = ref([])
    const form = ref(null)

    const addFormItem = () => {
      const item = document.createElement('el-form-item')
      item.setAttribute('label', '时段2')
      item.setAttribute('style', 'margin-top: 15px')
      const col = document.createElement('el-col')
      col.setAttribute('span', '22')
      const datePicker = document.createElement('el-date-picker')
      datePicker.setAttribute('v-model', 'timeParam')
      datePicker.setAttribute('start-placeholder', '开始时间')
      datePicker.setAttribute('end-placeholder', '结束时间')
      datePicker.setAttribute('type', 'datetimerange')
      datePicker.setAttribute('value-format', 'YYYY-MM-DD HH:mm:ss')
      datePicker.setAttribute('format', 'YYYY-MM-DD HH:mm:ss')
      col.appendChild(datePicker)
      item.appendChild(col)
      form.value.appendChild(item)
      formItems.value.push(item)
    }

    onMounted(() => {
      form.value = document.querySelector('[ref="form"]')
    })

    return {
      formItems,
      addFormItem
    }
  }
}
</script>

在addFormItem方法中，我们首先创建一个el-form-item元素，然后使用setAttribute方法设置标签的属性。接下来，我们创建el-col和el-date-picker元素，并将它们添加到el-form-item中。最后，我们将el-form-item添加到表单中，并将它添加到formItems数组中以便进行管理。

当你点击“添加表单项”按钮时，调用addFormItem方法即可动态添加表单项。

需要注意的是，动态添加HTML标签可能会导致安全性问题和性能问题，所以你需要谨慎使用。如果可能，你应该尽量使用组件化方式来管理你的页面。