jeecg-vue3-slots插槽搭配upload文件上传的简单使用

1.test.vue(文件内容对多个文件。一对多实现方式，可调整)

<BasicTable @register="registerTable">
      <template #upload="{ record }">
        <a-upload
          name="file"
          :multiple="true"
          :beforeUpload="beforeUpload"
          :action="uploadUrl"
          :headers="headers"
          @success="uploadChange"
          :showUploadList="false"
          :maxCount="5"
          :disabled="isDisabled"
        >
          <a-button>
            上传文件<Icon icon="ant-design:upload-outlined" />
          </a-button>
          <div class="upload-error">
            只能上传PDF、Word或Excel文件！
          </div>
        </a-upload>
        <div v-if="record.urlList && record.urlList.length > 0">
          <h4>已上传文件列表：</h4>
          <div v-for="url in record.urlList" :key="url" class="list-view">
            {{ url.wjmc }}
            <a-space wrap>
              <!-- 根据文件类型展示不同的按钮 -->
              <a-button type="primary" size="small" @click="handleDeleteFile(url)" v-show="!isDisabled">删除</a-button>
            </a-space>
          </div>
        </div>
      </template>
    </BasicTable>

2.test.data.api

export const fileUploadColumns: BasicColumn[] = [
    {
        title: '内容',
        dataIndex: 'wjmc',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        slots: { customRender: 'upload' },
    },
]

3.依赖导入

  import { Icon } from '/@/components/Icon';

  import { BasicTable } from '/@/components/Table';

  import { useMessage } from '/@/hooks/web/useMessage';  //文件上传成功依赖

  import { fileUploadColumns } from './test.data';

4.注意和总结

1.<template #upload="{ record }"> record 是集合的遍历，可以修改； upload与slots: { customRender: 'upload' }相对应
2.实现了table文件上传，table文件删除，table文件列表展示，table文件格式限制，table上传个数限制