vue2 实现卡片模板编辑

需求背景

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

解决效果

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('删除成功')
	  })
	},
}

视频效果

vue2实现卡片数据模板编辑