Tanstack Table und React JS: So zeigen/verbergen Sie Schaltflächen basierend auf dem Status, wenn Sie React JS und Tanstack Table verwenden
P粉042455250
P粉042455250 2023-09-02 23:04:17
0
2
713
<p>Ich habe React JS und die Tanstack-Tabelle (React-Table) implementiert. Ich benötige Hilfe beim Ein- oder Ausblenden von Schaltflächen/Links basierend auf dem Status jeder Zeile. Angenommen, wenn es eine Zeile mit dem Status gibt, wird die Schaltfläche „Genehmigen“ angezeigt, andernfalls wird sie ausgeblendet. </p> <pre class="brush:php;toolbar:false;">......einige Initialisierungsdaten const [sorting, setSorting] = useState<SortingState>([]); const [rowSelection, setRowSelection] = useState({}); const [isApproved, setIsApprove] = useState(false); ...Aufrufspalte const columns = useMemo<ColumnDef<IEvent>[]>( ...Liste der Spalten { accessorKey: "status", Header: () => <span>Status</span>, Zelle: (Zelle: beliebig) => let status = cell.getValue(); return cell.getValue(); }, enableSorting: true, enableColumnFilter: true, }, { accessorKey: "Aktionen", Header: () => <span>Action</span>, Zelle: (Zelle: beliebig) => console.log(isApproved); zurückkehren ( <div className="inline-flex gap-x-2"> <Link to={`./${cell.row.id}/edit`}>Bearbeiten</Link> <EVSDeleteButton id={cell.row.id} header="event" <Link to={`./${cell.row.id}/agenda`}>Agenda</Link> </div> ); }, enableSorting: false, enableColumnFilter: false, },</pre> <p>Ich möchte die Schaltfläche („Agenda“) je nach Status jeder Zeile ein-/ausblenden können</p>
P粉042455250
P粉042455250

Antworte allen(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>
      ),
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage