vue3 动态 生成 form 生成多行。form

vue3 动态 生成 form  生成多行。form

动态生成多个input  多个图片选择。图片上传。

<template>

  <el-container>
    <el-header>
      <h2>动态内容编辑器</h2>
    </el-header>
    <el-main>
      <el-form :model="form">
        <div v-for="(row, index) in form.rows" :key="index" class="row">
          <el-form-item label="文字输入" :prop="'rows.' + index + '.text'">
            <el-input v-model="row.text"></el-input>
          </el-form-item>
          <el-form-item label="图片选择">
            <el-upload
                class="upload-demo"
                drag
                :action="false"
                :show-file-list="false"
                :before-upload="handleBeforeUpload(index)"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">拖拽文件到此处，或<em>点击上传</em></div>
              <div v-if="row.imageUrl" class="image-preview">
                <img :src="row.imageUrl" alt="" style="width: 100px; height: 100px;">
              </div>
            </el-upload>
          </el-form-item>
          <el-button type="danger" icon="el-icon-delete" @click="removeRow(index)">删除</el-button>
        </div>
        <el-button type="primary" @click="addRow">添加一行</el-button>
        <el-button type="success" @click="submitData">提交数据</el-button>
      </el-form>
    </el-main>
  </el-container>


</template>

<script setup>
    import requestUtil from "@/util/request";
    import  store from '@/store'
    import  {ref, onMounted,nextTick , reactive,onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'
    import  {ElMessage} from 'element-plus'
    import  router from '@/router'
    import Cookies from "js-cookie";
    import { encrypt, decrypt } from "@/util/jsencrypt";
    import {Check,  Delete,  Edit,   Message,  Search,   Star,} from '@element-plus/icons-vue'
    import { usePermissions } from '@/util/usePermissions'; // 假设 usePermissions.js 在同一目录下

    const form = reactive({
      rows: [
        { text: '', imageUrl: '' },
        // 您可以根据需要预设更多行
      ]
    });

    const addRow = () => {
      form.rows.push({ text: '', imageUrl: '' });
    };

    const removeRow = (index) => {
      form.rows.splice(index, 1);
    };

    const handleBeforeUpload = (index) => (file) => {
      // 此处仅为示例，实际开发中您可能需要对文件进行进一步处理
      const reader = new FileReader();
      reader.onload = (e) => {
        form.rows[index].imageUrl = e.target.result;
      };
      reader.readAsDataURL(file);
      // 阻止文件自动上传（因为我们只想要预览）
      return false;
    };

    const submitData = () => {
      // 提交前可以对数据进行校验
      console.log('提交的数据:', form.rows);
      // 使用axios或其他HTTP客户端发送数据到服务器
      // 例如：axios.post('/api/submit', form).then(response => { ... }).catch(error => { ... });
      ElMessage.success('数据提交成功！');
    };

    // 在组件挂载完成后调用
    onMounted(() => {
      console.log('mounted');

    });
</script>

<style scoped>
div{
  padding: 25px;
}
</style>