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

最新推荐文章于 2025-10-07 08:44:50 发布

原创

最新推荐文章于 2025-10-07 08:44:50 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

本文介绍了如何在React手机端项目中，使用rc-table库根据特定条件实现表格列的隐藏。在遇到表格附件编辑需求时，通过过滤方法控制列的显示与隐藏，同时展示了图片上传的操作实现。在不可编辑状态下，表格仅为展示效果；在可编辑状态下，附件列可编辑。详细代码实现主要集中在columns配置上，辅助以相应的CSS样式。更多参考资料可查看rc-table官方文档。

最近公司某一项目的手机端，新增需求：table中的附件要可以编辑，并且是在特定条件下可编辑，其他仅做展示效果。
查阅官方文档，没有发现是否隐藏这一属性，通过css控制样式感觉也比较麻烦，后面发现可以通过过滤来控制
效果图：
不可编辑、仅展示
在这里插入图片描述
可编辑

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

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) =&g