Ant Design vue3版本里面a-table第一列合并相同的,第二列可以展开子集(修复bug版)

功能需求:

使用Ant Design vue 中的table和vue3实现第一列动态合并相同数据,第二列以树形展开

需要达到的效果图:

问题bug:

昨天那个解决方式经过测试发现只能满足最后一行是需要展开的任务时才生效,当任务行在中间,然后存在子集时,点击展开会出现错位的现象,如下图:又请教了一位大佬,大佬研究了两个多小时,最终完成功能实现,虽然有点看不咋懂,但记录一下下次遇到类似的好找。

修改后的代码:

表格渲染:(此处增加了展开的方法)

 <a-table
        class="mt_20"
        :columns="rightColumns"
        :expandIconColumnIndex="1"
        :rowKey="(record) => record.id"
        bordered
        :loading="tableLoading"
        :scroll="{ x: 1200 }"
        :data-source="dataSource"
        @expand="onExpand"
      />

表头渲染:(此处并无太大修改)

const rightColumns = ref([
  {
    title: '项目阶段',
    dataIndex: 'projectPhaseName',
 
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Ant Design Vue 1.7.8 版本中,a-upload 组件可以使用自己封装的接口进行上传文件。你可以在 a-upload 组件的 `customRequest` 属性中指定一个自定义的上传函数,该函数将会代替默认的上传行为。 下面是一个示例代码,演示了如何使用自定义的上传函数上传文件: ```html <template> <a-upload :action="uploadUrl" :custom-request="customUpload" > <a-button icon="upload">上传文件</a-button> </a-upload> </template> <script> import { Upload } from 'ant-design-vue' export default { components: { 'a-upload': Upload }, data () { return { uploadUrl: '/api/upload' } }, methods: { customUpload ({ file, onSuccess, onError, onProgress }) { const xhr = new XMLHttpRequest() xhr.open('POST', this.uploadUrl) xhr.setRequestHeader('Content-Type', 'multipart/form-data') xhr.upload.onprogress = e => { if (e.total > 0) { e.percent = (e.loaded / e.total) * 100 } onProgress({ percent: e.percent }, file) } xhr.onload = e => { if (xhr.status === 200) { onSuccess(JSON.parse(xhr.responseText), file) } else { onError(xhr.statusText, file) } } xhr.onerror = e => { onError(xhr.statusText, file) } const formData = new FormData() formData.append('file', file) xhr.send(formData) } } } </script> ``` 在上述代码中,我们定义了一个 `customUpload` 函数,它接收一个包含上传文件信息和回调函数的对象参数。在这个函数中,我们使用 XMLHttpRequest 发送一个 POST 请求,将文件上传到指定的 URL。在上传过程中,我们监听了 `xhr.upload.onprogress` 事件,以便在文件上传进度发生变化时更新进度条。在上传完成后,根据服务器返回的结果执行相应的回调函数。 最后,我们将 `customUpload` 函数作为 `a-upload` 组件的 `customRequest` 属性的值,以便在上传文件时使用该函数代替默认的上传行为。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值