vue3可编辑列表,列表包含input,el-select ,el-switch ,el-time-picker

Vue 3中的可编辑列表可以使用v-for指令和v-model指令来实现。如果列表中包含不同类型的表单元素，我们需要在模板中根据不同的类型渲染不同的表单元素。下面是一个包含input、el-select、el-switch和el-time-picker的可编辑列表的示例：

HTML代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <div v-if="item.type === 'input'">
          <input type="text" v-model="item.value" @blur="updateItem(index)">
        </div>
        <div v-else-if="item.type === 'select'">
          <el-select v-model="item.value" @change="updateItem(index)">
            <el-option v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </div>
        <div v-else-if="item.type === 'switch'">
          <el-switch v-model="item.value" @change="updateItem(index)"></el-switch>
        </div>
        <div v-else-if="item.type === 'time-picker'">
          <el-time-picker v-model="item.value" @change="updateItem(index)"></el-time-picker>
        </div>
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
    <button @click="addItem('input')">添加输入框</button>
    <button @click="addItem('select')">添加下拉框</button>
    <button @click="addItem('switch')">添加开关</button>
    <button @click="addItem('time-picker')">添加时间选择器</button>
  </div>
</template>

JavaScript代码：

export default {
  data() {
    return {
      list: [
        { type: 'input', value: 'Apple' },
        { type: 'select', value: '1', options: [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' },
        ] },
        { type: 'switch', value: true },
        { type: 'time-picker', value: '12:00' }
      ]
    }
  },
  methods: {
    addItem(type) {
      let item = {}
      if (type === 'input') {
        item = { type: 'input', value: '' }
      } else if (type === 'select') {
        item = { type: 'select', value: '', options: [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' },
        ] }
      } else if (type === 'switch') {
        item = { type: 'switch', value: false }
      } else if (type === 'time-picker') {
        item = { type: 'time-picker', value: '' }
      }
      this.list.push(item)
    },
    deleteItem(index) {
      this.list.splice(index, 1)
    },
    updateItem(index) {
      if (!this.list[index].value) {
        this.list.splice(index, 1)
      }
    }
  }
}

在这里，我们使用v-for指令循环遍历列表中的每个项目，并根据项目的类型渲染不同的表单元素。当用户添加或删除项目时，我们在JavaScript代码中添加了对应的方法，以便更新列表数据。