elementUI 在可编辑表格中手动上传文件

在 ElementUI 的可编辑表格中，可以通过自定义编辑器的方式来实现手动上传文件。具体步骤如下：

1. 在表格中定义需要上传文件的列，并设置列的 `type` 属性为 `upload`，例如：

<el-table-column prop="file" label="文件" :edit-renderer="fileEditor"></el-table-column>

2. 定义 `fileEditor` 编辑器组件，该组件需要包含一个带有 `ref` 属性的 `<el-upload>` 组件，例如：

<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    :auto-upload="false"
    :on-change="handleChange"
    :before-upload="handleBeforeUpload"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button slot="append" size="small" type="success" @click="handleUpload">上传文件</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleChange(file, fileList) {
      // 处理文件列表变化事件
      console.log(file, fileList);
    },
    handleBeforeUpload(file) {
      // 处理文件上传前事件，可进行校验等操作
      console.log(file);
    },
    handleUpload() {
      // 手动触发文件上传事件
      this.$refs.upload.submit();
    }
  }
};
</script>

3. 在表格组件中定义 `fileEditor` 编辑器的实例，并在 `editors` 属性中注册，例如：

<template>
  <div>
    <el-table
      :data="tableData"
      :columns="tableColumns"
      :edit-config="{ trigger: 'click', mode: 'cell' }"
      :editors="{ fileEditor: fileEditor }"
    >
    </el-table>
  </div>
</template>

<script>
import FileEditor from './FileEditor.vue';

export default {
  components: {
    FileEditor
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, file: null },
        { name: '李四', age: 20, file: null }
      ],
      tableColumns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'file', label: '文件', type: 'upload', editRender: 'fileEditor' }
      ]
    };
  },
  computed: {
    fileEditor() {
      return {
        render: (h, ctx) => {
          return h('file-editor', {
            props: { value: ctx.value },
            on: { input: ctx.set }
          });
        }
      };
    }
  }
};
</script>

这样，当用户点击表格中 `file` 列的单元格时，会弹出一个上传文件的对话框，用户可以选择文件并手动上传。上传成功后，文件的信息会保存到表格数据中。