vue2 实现卡片模板编辑

柳晓黑胡椒

已于 2025-03-25 11:30:03 修改

阅读量774

点赞数

CC 4.0 BY-SA版权

分类专栏： # vue实践文章标签： javascript 前端 html

于 2023-04-04 14:49:42 首次发布

柳晓黑胡椒

本文链接：https://blog.youkuaiyun.com/hr_beginner/article/details/129952736

vue实践专栏收录该内容

24 篇文章

订阅专栏

文章介绍了如何在Vue2应用中使用卡片模板来管理编辑复杂表单数据，通过卡片结构展示标题、内容和图片等信息，并提供了动态添加和删除卡片的功能，同时展示了具体的HTML和JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🚀 个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、优快云优质创作者
💟 作者：柳晓黑胡椒❣️
📝 专栏：vue实践
🌈 若有帮助，还请关注 ➕ 点赞➕收藏，不行的话我再努努力💪💪💪

需求背景

对于复杂表单的数据新增，希望通过卡片模板进行管理编辑

解决效果

在这里插入图片描述

index.vue

html

<!-- ... -->
<div class="tips">
  <span><i></i>传说佳话</span>
  <i class="el-icon-plus" @click="addList('historyStorys')" v-if="!editState"></i>
</div>
<el-row :gutter="15" v-for="(item, index) in formData.historyStorys" :key="index + 'd'">
  <el-col :span="24">
    <el-form-item label="标题" prop="historyTitle">
      <el-input v-model="item.historyTitle" placeholder="请输入标题信息" clearable :style="{width: '100%'}"
                :disabled="editState">
      </el-input>
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="内容" prop="historyContent">
      <el-input v-model="item.historyContent" type="textarea" placeholder="请输入内容信息"
                :autosize="{minRows: 2, maxRows: 4}" :style="{width: '100%'}" :disabled="editState"
      ></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="图片" prop="coverImg">
      <image-upload
        ref="imagesUpload"
        :limit="4"
        :fileSize="10"
        v-model="item.coverImg"
        :disabled="editState"
      ></image-upload>
    </el-form-item>
  </el-col>
  <el-col :span="24" :push="22">
    <el-button
      type="danger"
      style="margin-bottom: 10px"
      @click="delHistory(item,'historyStorys')"
      v-if="!editState"
    >删除
    </el-button>
  </el-col>
</el-row>
<!-- ... -->

javascript

data() {
 return {
    formData: {
      historyStorys: [
        {
          historyTitle: "",
          historyContent: "",
          coverImg: ""
        }
      ]
    },
  };
},
methods: {
	addList(type) { // 增加表单
	  this.formData[type].push({
	    historyTitle: "",
	    historyContent: "",
	    coverImg: ""
	  });
	},
	delHistory(item, type) {
	  const self = this;
	  this.$modal.confirm('是否确认删除标题为"' + item.historyTitle + '"的数据项？').then(function () {
	    let index = self.formData[type].indexOf(item);
	    if (index !== -1) {
	      self.formData[type].splice(index, 1);
	    }
	    if (!item.historyId) return
	    return delHistory(item.historyId)
	  }).then(() => {
	    this.$modal.msgSuccess('删除成功')
	  })
	},
}