Tanstack Table 和 React JS:使用 React JS 和 Tanstack Table 时如何根据状态显示/隐藏按钮
P粉042455250
P粉042455250 2023-09-02 23:04:17
[React讨论组]
<p>我有react js并实现了tanstack表(react-table)。我需要帮助来根据每行的状态使按钮/链接显示或隐藏。 假设如果有行包含状态“批准”按钮将显示,否则它将隐藏。</p> <pre class="brush:php;toolbar:false;">......some initiliaze data const [sorting, setSorting] = useState&lt;SortingState&gt;([]); const [rowSelection, setRowSelection] = useState({}); const [isApproved, setIsApprove] = useState(false); ......calling column const columns = useMemo&lt;ColumnDef&lt;IEvent&gt;[]&gt;( ......list of column { accessorKey: &quot;status&quot;, header: () =&gt; &lt;span&gt;Status&lt;/span&gt;, cell: (cell: any) =&gt; { let status = cell.getValue(); return cell.getValue(); }, enableSorting: true, enableColumnFilter: true, }, { accessorKey: &quot;actions&quot;, header: () =&gt; &lt;span&gt;Action&lt;/span&gt;, cell: (cell: any) =&gt; { console.log(isApproved); return ( &lt;div className=&quot;inline-flex gap-x-2&quot;&gt; &lt;Link to={`./${cell.row.id}/edit`}&gt;Edit&lt;/Link&gt; &lt;EVSDeleteButton id={cell.row.id} header=&quot;event&quot; /&gt; &lt;Link to={`./${cell.row.id}/agenda`}&gt;Agenda&lt;/Link&gt; &lt;/div&gt; ); }, enableSorting: false, enableColumnFilter: false, },</pre> <p>我希望可以显示/隐藏按钮(“议程”)依赖于每行的状态</p>
P粉042455250
P粉042455250

全部回复(2)
P粉555682718

您是否使用过三元运算符,条件 (三元)运算符

P粉006847750

您可以使用 cell.row.original.status 访问每行的 status 值,并根据该值显示按钮,而不是将其存储在状态中变量。

cell: (cell: any) => (
        <div className="inline-flex gap-x-2">
          <Link to={`./${cell.row.original.id}/edit`}>Edit</Link>
          {cell.row.original.status === "Approved" && (
            <Link to={`./${cell.row.original.id}/agenda`}>Agenda</Link>
          )}
        </div>
      ),
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号