el-table 中el-upload

在el-table中使用el-upload，你可以通过修改el-upload的样式来适应el-table的布局。你可以使用以下样式来修改el-upload的拖拽样式：

.el-upload {
   .el-upload-dragger {
      width: 250px;
      height: 150px;
      .el-icon-upload {
         margin: 20px 0 16px;
      }
   }
}

这样可以自定义el-upload的拖拽区域的宽度和高度。

另外，在el-table中，如果你想让表格有一个固定的高度，并且在这个高度下可以进行上下滚动来查看数据，你可以在el-table上使用height属性，并设置一个固定的高度值，例如：

<el-table :data="tableData" height="300px">
</el-table>

这样就可以设置el-table的高度为300px，并实现数据的滚动查看。 <span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

相关问题

el-upload + el-table

你的问题不是很明确，但我猜测你想问的是如何在 Vue 中使用 Element UI 的 el-upload 和 el-table 组件。如果是这样，可以按照以下步骤：

1. 安装 Element UI：在你的 Vue 项目中使用 npm 或 yarn 安装 Element UI。

2. 引入 el-upload 和 el-table 组件：在需要使用这两个组件的 Vue 文件中，通过 import 语句将它们引入。

3. 在模板中使用组件：在模板中使用 el-upload 和 el-table 组件，可以通过 v-model 绑定数据、通过 props 设置属性等。

以下是一个简单的例子，展示了如何使用 el-upload 和 el-table 组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleUploadSuccess"
      :before-upload="beforeUpload">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElUpload, ElButton, ElTable, ElTableColumn } from 'element-ui';

export default {
  components: {
    ElUpload,
    ElButton,
    ElTable,
    ElTableColumn
  },
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    beforeUpload(file) {
      console.log(file);
    }
  }
}
</script>

这个例子中，我们使用了 el-upload 组件来上传文件，使用了 el-table 组件来展示数据。在 el-upload 组件中，我们设置了上传成功的回调函数 handleUploadSuccess 和上传前的回调函数 beforeUpload。在 el-table 组件中，我们绑定了数据 tableData，并设置了表格列的属性。

希望这个例子能够帮到你。

el-table+el-upload

el-table是一个基于Element UI的表格组件，用于展示后台数据。el-upload是Element UI提供的上传组件，用于上传文件。在el-table中每一行都需要上传图片的需求中，可以通过使用el-upload组件来实现。

正常情况下，使用el-upload组件可以对一个参数进行赋值。例如，通过设置:file-list属性来绑定上传成功后的文件列表。具体代码如下：

<el-upload
  class="uploadImg"
  :action="uploadAction()"
  name="file_name"
  list-type="picture-card"
  accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
  :file-list="form.qa_android_picUrl"
  :on-preview="handlePictureCardPreview"
  :on-success="handleAvatarSuccess"
  :on-remove="handleRemove"
>
  <i class="el-icon-plus"></i>
</el-upload>

在js代码中，可以通过定义handleAvatarSuccess方法来处理上传成功后的操作。例如，可以使用this.$set方法来更新表格中对应位置的参数值。具体代码如下：

handleAvatarSuccess(res, file, fileList, row, col) {
  this.$message.success('上传成功');
  this.$set(this.form.events[row.event_index], col, fileList);
},

在上述代码中，this.form.events是一个二维数组，代表el-table中的每一行数据。通过row和col参数可以获取到当前操作的行和列的索引，然后使用this.$set方法将上传成功后的文件列表赋值给对应位置的参数。

如果只需要对一个参数进行赋值，可以使用如下代码：

handleAvatarSuccess(res, file, fileList) {
  this.$message.success('上传成功');
  this.form.qa_android_picUrl = fileList;
},

在上述代码中，this.form.qa_android_picUrl是一个数组，用于保存上传成功后的文件列表。

综上，通过使用el-upload组件和相应的js代码，可以实现在el-table中每一行都有多个字段需要上传图片的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Elementui使用el-table+el-upload+箭头函数为每行数据上传图片](https://blog.csdn.net/zero_ghq/article/details/109860394)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]