react 手机端 rc-table列隐藏(根据相关条件是否隐藏)、实现图片上传操作

最近公司某一项目的手机端,新增需求:table中的附件要可以编辑,并且是在特定条件下可编辑,其他仅做展示效果。

查阅官方文档,没有发现是否隐藏这一属性,通过css控制样式感觉也比较麻烦,后面发现可以通过过滤 来控制

效果图:
不可编辑、仅展示

可编辑


实现代码(主要是相关的columns):

javascript 复制代码
const [detailList, setDetailList] = useState([]) // 明细信息
const [sealList, setSealList] = useState([]); // 上传的范印
const [editId, setEditId] = useState(''); // 修改范印的数据id

const columns = [
// {} ...
{
        title: getIntl({ id: 'sealFileId' }), // 范印
        dataIndex: 'sealFileSuffix',
        key: 'sealFileSuffix',
        render: (val, params) => {
          return <a onClick={()=>{
            download({ fileId: params.sealFileId,  fileName: params.sealFileSuffix })
          }}>{val}</a>;
        },
        align: 'center',
      },
      {
        title: getIntl({ id: 'operation' }), // 操作
        dataIndex: '',
        key: 'operation',
        render: (val, params, sss) => {
          return <a onClick={()=>{
            setEditId(params.id) // 这里记录下修改的是表格中的哪条数据,对应后面上传成功后进行匹配修改表格数据
          }}>
            <ImageUploader
                value={[]}
                maxCount={1}
                onChange={setSealList}
                upload={upload}
              >
                <span>上传</span>
              </ImageUploader>
          </a>;
        },
        align: 'center',
        hidden: qs.parse(location.search)?.pageType !== 'submit' 
        // 这里是如果当前url上pageType为submit时,操作列展示可操作
        // 这里通过filter过滤来实现某条件下,此操作列是否隐藏
      },
     ].filter(item => !item.hidden)


  const upload = async file => {
      const {url} = getMethodInfo('FILE_UPLOAD')
      const data = new FormData()
      data.append('file', file)
      await axios({ // 这里自己后端的图片上传接口
        url: url,
        method: 'post',
        data,
      }).then((res) => {
        if (res.data.code == 200){
          detailList.map(item =>{
            if(item.id === editId) {
              item.sealFileId = res.data.datas?.fileId
              item.sealFileSuffix = res.data.datas?.fileName
            }
          })
          setDetailList(detailList)
        }
      })
      return { url: '' }
    }

return (
  <Table
    emptyText={getIntl({ id: 'component.noticeIcon.empty' })}
    columns={columns}
    data={detailList}
  />
)

相关的css

javascript 复制代码
:global {
    .adm-image-uploader-cell {
      display: none;
    }
    .adm-space-item .adm-image-uploader-upload-button-wrap {
      display: block !important;
    }
    .adm-space-horizontal > .adm-space-item {
      margin-right: 0;
    }
  }

其他:其他相关可以去参考官方文档
https://www.npmjs.com/package/rc-table

相关推荐
然我27 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子32 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹35 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器42 分钟前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss