vue实现表格文本图片输入可编辑删除增加行生成json数据代码-html代码-BFW代码库

vue实现表格文本图片输入可编辑删除增加行生成json数据代码

代码语言：html

所属分类：其他

代码描述：vue实现表格文本图片输入可编辑删除增加行生成json数据代码，可编辑上传图片、编辑文本，删除和增加行，最终生成json数组文件到本地。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<style>
     /* 定位容器相对定位 */
  .image-upload-container {
    position: relative;
    display: inline-block; /* 制作成行内块元素使其大小适应内容 */
  }
  
  /* 对 <img> 元素不需要特别的样式，这仅用作参考 */
  img {
    display: block;
    width: 200px; /* 或是你希望图片的尺寸 */
    height:150px;
  }

  /* 样式化 <input type="file"> 元素，使其覆盖在图片上 */
  .image-upload-container input[type='file'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 设置宽高和图片一致 */
    height: 100%;
    opacity: 0; /* 完全透明 */
    cursor: pointer; /* 鼠标移上去时显示为指针形状 */
  }

  /* 额外的：为覆盖在图片上的区域提供视觉反馈 */
  .image-upload-container:hover input[type='file'] {
    background-color: rgba(255, 255, 255, 0.3); /* 轻微白色覆盖层 */
  }
</style>
</head>
<body>

<div id="app">
  <table class="table">
    <tr>
      <th>文字</th>
      <th>图片</th>
      <th>操作</th>
    </tr>
    <tr v-for="(row, index) in rows" :key="index">
      <td ><input v-model="row.text" type="text"></td>
      <td>
          
          
<!-- 图片和上传组件的容器 -->
<div class="image-upload-container">
    
    <img v-if="row.image==''" src="//repo.bfw.wiki/bfwrepo/icon/632819a7db7b3.png" alt="Uploaded Image" height="50">
<img   v-if="row.image!=''" :src="row.image" alt="Uploaded.........完整代码请登录后点击上方下载按钮下载查看