国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Tanstack Table 和 React JS:使用 React JS 和 Tanstack Table 時(shí)如何根據(jù)狀態(tài)顯示/隱藏按鈕
P粉042455250
P粉042455250 2023-09-02 23:04:17
0
2
942
<p>我有react js並實(shí)作了tanstack表(react-table)。我需要幫助來(lái)根據(jù)每行的狀態(tài)使按鈕/連結(jié)顯示或隱藏。 假設(shè)如果有行包含狀態(tài)「批準(zhǔn)」按鈕將顯示,否則它將隱藏。 </p> <pre class="brush:php;toolbar:false;">......some initiliaze data const [sorting, setSorting] = useState<SortingState>([]); const [rowSelection, setRowSelection] = useState({}); const [isApproved, setIsApprove] = useState(false); ......calling column const columns = useMemo<ColumnDef<IEvent>[]>( ......list of column { accessorKey: "status", header: () => <span>Status</span>, cell: (cell: any) => { let status = cell.getValue(); return cell.getValue(); }, enableSorting: true, enableColumnFilter: true, }, { accessorKey: "actions", header: () => <span>Action</span>, cell: (cell: any) => { console.log(isApproved); return ( <div className="inline-flex gap-x-2"> <Link to={`./${cell.row.id}/edit`}>Edit</Link> <EVSDeleteButton id={cell.row.id} header="event" /> <Link to={`./${cell.row.id}/agenda`}>Agenda</Link> </div> ); }, enableSorting: false, enableColumnFilter: false, },</pre> <p>我希望可以顯示/隱藏按鈕(「議程」)依賴(lài)每行的狀態(tài)</p>
P粉042455250
P粉042455250

全部回覆(2)
P粉555682718

您是否使用過(guò)三元運(yùn)算符,條件 (三元)運(yùn)算子

#
P粉006847750

您可以使用 cell.row.original.status 存取每行的 status 值,並根據(jù)該值顯示按鈕,而不是將其儲(chǔ)存在狀態(tài)中變數(shù)。

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>
      ),
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板