Ant-design: Keine Möglichkeit, Aggregationsstatistikdaten in der Tabelle anzuzeigen

Hallo @TangMonk , es scheint, dass Sie eine Funktion anfordern, als einen Fehler zu melden. Ich fürchte, wir haben nicht vor, diese Funktion zu implementieren. Sie können die Standardpaginierung der Tabelle deaktivieren und die Paginierung selbst implementieren.

Vielleicht können wir etwas tun, damit footer in den Tisch passt?

@yesmeck , danke für deine Antwort, aber es gibt zu viele Probleme, ich denke, diese Funktion ist wirklich nützlich und notwendig.

Verwandte Themen: # 3591, # 1483, # 4581

@ afc163 , danke!

Was ist Ihr Vorschlag oder Ihre Lösung?

Ich bin nicht sicher, ich denke, es kann die Größe der Tabellendaten nicht streng einschränken, indem pageSize wird. Die Daten sollten von der Serverseite anstatt von der Clientseite verarbeitet werden. Wir können also alle zusätzlichen Daten zur Tabelle hinzufügen

Hallo,
Gibt es ein Update für diese Funktionen? Oder ein anderer Weg, es zu tun?

@yesmeck Die einfachste Lösung besteht darin, in der Fußzeile ein tatsächliches <tfoot> innerhalb der Tabelle zu rendern, anstatt ein zusätzliches <div> außerhalb der Tabelle anzuhängen .

Die Leute versuchen, eine zusätzliche Zeile in dataSource zu quetschen, nur weil sie möchten, dass das Tabellenlayout die Spalten für sie ausrichtet.

Ja, wir haben bereits eine footer Requisite, können keinen passenden Namen für <tfoot/> .

Ich schlage vor, die aktuelle footer -Stütze neu zu implementieren, damit sie eine <tfoot /> -Tabelle rendert, ohne eine neue tfoot -Stütze hinzuzufügen. Glaube nicht, dass es irgendetwas kaputt macht.

@yesmeck Diese Funktion wird

Hat sich jemand im Team schon darum gekümmert? Wenn nein, könnte ich mich vielleicht darum kümmern.

Sie können PR versuchen.

@yesmeck Los geht's: https://github.com/react-component/table/pull/191
Siehe Beispiel / renderFooterInTable für den Effekt

Nachdem ich eine Weile über die tfoot API nachgedacht habe, möchte ich sie der Eigenschaft column hinzufügen:

const columns = [{
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  footer: (data) => {
    return <div>Summary: {data.reduce((sum, record) => sum + record.age, 0)}</div>
  },
}, {
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}];

rendert

Es ist klarer, einen Unterschied zwischen den aktuellen Table[footer] .

Gute Idee. Ich bin damit einverstanden, dass dies ein besserer Ort wäre, um eine neue API einzuführen.

@hackape Könnten Sie eine neue PR vorschlagen?

sichere Sache

https://codesandbox.io/s/m45r6o4nj8
Erreicht, aber es gibt ein Problem mit der Verknüpfung der Bildlaufleiste, es ist bequemer zu sehen

@yesmeck Wie ist der Zustand der Reaktionskomponente / Tabelle # 195 jetzt, Feedback?

Sah es verschmolzen 👍 @yesmeck

Ich habe jedoch eine zusätzliche Funktionsanfrage erhalten. Ich möchte vorschlagen, dass die sogenannte "Fußzeile" oben in der Tabelle direkt unter der Tabellenüberschrift angezeigt wird.

Beispiel:

Die tatsächlich angeforderte Funktion, die die ganze Zeit diskutiert wird, ist ein Mittel, um eine zusätzliche Zeile für die Anzeige statistischer Informationen einzudrücken - mit anderen Worten eine "Zusammenfassungszeile", ohne den Inhalt von dataSource zu manipulieren, nicht eine "Fußzeile" der Positionssinn.

@hackape Sie können die Spaltengruppierung verwenden, siehe https://codesandbox.io/s/pmorq2x2lq

Ja, wäre es nur zu Positionierungszwecken, wäre dies ein praktikables Mittel. Im Sinne der Geschäftslogik ist es jedoch viel besser, den Benutzer dies über meine vorgeschlagene API tun zu lassen.

Denken Sie, wir können die column.footer API in column.summary umbenennen.

const columns = [{
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  summary: {
    render: (data) => {
      return <div>Summary: {data.reduce((sum, record) => sum + record.age, 0)}</div>
    },
    position: 'bottom',  // default to 'bottom', could be 'top'
  }
}]

@yesmeck Betrachten Sie https://github.com/ant-design/ant-design/issues/6896

Ich würde vorschlagen, zwei neue Profis namens pinnedTopData und pinnedBottomData vorzustellen.

const columns = [
  { title: 'Price', dataIndex: 'price' },
  { name: 'Name', dataIndex: 'name' },
];

const data = [
  { price: 3, Name: 'Foo' },
  { price: 5, Name: 'Bar' },
];

const pinnedData = [
  { price: <span style={{ fontWeight: 'bold' }}>Total: 8</span> }
];

<Table
  columns={columns}
  dataSource={data}
  pinnedTopData={pinnedData}
  pinnedBottomData={pinnedData}
/>

Rendert:

| Preis | Name |
| ---------- | ------ |
| Gesamt: 8 | |
| 3 | Foo |
| 5 | Bar |
| Gesamt: 8 | |

Es ist besser, # 6896 und dieses Problem mit derselben API zu beheben.

Gibt es neue Fortschritte?

@Nokecy sieht seine Lösung auf zwei Arten, er hat sie nicht vorübergehend zum Attribut hinzugefügt. Ich denke, seine Neu-Tabelle hat dieses Attribut, vorausgesetzt, die Versionsnummer wird auf den neuesten Stand gebracht, aber es sollte notwendig sein, die Datei antd package.json zu ändern Zwei Methoden,
1. Wenn nicht viele Spalten vorhanden sind und keine Bildlaufleiste angezeigt wird, ist dies leicht zu lösen. Ich habe oben ein Beispiel.
2. Sie können mehrere Titelleisten verwenden, um anzuzeigen, es fühlt sich nicht so schön an.

Ich freue mich darauf, diese Funktion zu verbessern und habe darauf geachtet, aber unser Antd ist 2. Selbst wenn es aktualisiert wird, weiß ich nicht, ob die 2. Version dieses Attribut haben wird

Irgendein Update für dieses Problem?

Bevor sie eine offizielle API ausliefern können, schlage ich vor, eine benutzerdefinierte Komponente table.props.components.body.wrapper bereitzustellen und die erhaltenen props.children manipulieren.

https://codesandbox.io/s/xpvwpx0npw
Ich habe das dom-Element direkt manipuliert und eine Summe gekapselt. Sie können nach dieser Methode viele Fußzeilen hinzufügen, aber der Beamte empfiehlt nicht, das dom-Element direkt zu bedienen. Wenn Sie es dringend benötigen, können Sie darauf verweisen

@ LDD123 Die Schriftrolle x befindet sich in Ihrem Beispiel nur in der Fußzeile. Der Körper sollte auch mit der Fußzeile scrollen

@jagratiTomar der Körper scrollt , ich binde das Bildlauf-x des Körpers mit dem Bildlauf-x der Fußzeile

@ LDD123 können Sie teilen und beispielhaft Text ein Bildlauf -y befindet, da in diesem Fall nur der Körper scrollen und nicht die Fußzeile

@ jagratiTomar jetzt habe ich scroll-x versteckt nicht scrollen, es wird ok sein

@ LDD123 Sie sagen also, dass dieses Beispiel Bildlauf gibt?

ja

Hallo @yesmeck @ afc163 ,

Unsere Designer setzen die Fußzeile (sie enthält die aggregierten Werte) für UX-Zwecke oben auf den Text und direkt unter der Kopfzeile. Die Pfeile für die Sortierung in Kopf- und Fußzeile enthalten nur aggregierte Werte. Mit ColumnGroup werden Pfeile zum Sortieren an den unteren Rand angehängt. Aus Sicht des Stils ist es viel einfacher, die Fußzeile zu stylen und oben zu platzieren, da der Fußzeilencontainer eine andere Farbe hat und nur einige Zellen einen Trenner haben.

Ich würde einfach tun:

.my-table tfoot > tr {
 background-color: gray;
}

Die Tabellenkomponente könnte ungefähr so ​​aussehen:

<Table appendColumnFooterTop={true}>
   <Column
      footer={(data) => <div>Summary: {data.reduce((sum, record) => sum + record.age, 0)}</div>}
   />
</Table>

Design:

Beachten Sie nicht den nicht ausgerichteten Text in den Zellen, der von einer zuvor erstellten Seite stammt, die auf der neuen Seite ausgerichtet werden muss, die wir codieren.

Ich könnte meine Hilfe anbieten, wenn ich wüsste, dass sie innerhalb von 2 oder 3 Wochen veröffentlicht werden könnte (Spaltenfußzeile und Ausrichtung). Sonst werde ich gezwungen sein, andere Lösungen zu finden.

Oh, und ich konnte nicht verstehen, ob es in # 6896 um die Fußzeile einer Spalte geht, also habe ich hier geschrieben.

Vielen Dank.

@kaanozcan Ich habe bereits im März eine PR eingereicht, die dieselbe Idee umsetzt (siehe hier ). Das Kernteam hat sie zusammengeführt und dann wurde sie zurückgesetzt. Scheint, als hätten sie eine andere Idee, wie das Problem angegangen werden sollte. Angesichts der Situation würde ich vorschlagen, dass Sie den Weg "andere Lösungen finden" einschlagen.

@kaanozcan Hier ist ein Beispiel, mit dem Sie Ihr Ziel durch benutzerdefinierte Komponenten erreichen: https://codesandbox.io/s/xjpkx9rzzw

@yesmeck Das funktioniert perfekt. Vielen Dank.

Das Schließen aufgrund der ursprünglichen Anforderung kann durch benutzerdefinierte Komponenten erreicht werden.

@yesmeck Können wir eine Demo zu diesem Anwendungsfall bereitstellen?

https://codesandbox.io/s/xjpkx9rzzw
Dieses Beispiel hat keine praktische Bedeutung. Denn wenn sich die Daten ändern. Die letzte Summe verwendet nicht die neuesten Daten. Es ist das Ergebnis der letzten Aktualisierung. Es sollte dort sein, wo schmutzige Daten vorhanden sind.

@yesmeck Das von Ihnen
const data = [ { key: "1", name: "John Brown", age: 30, address: "New York No. 1 Lake Park", }, { key: "2", name: "Jim Green", age: 20, address: "London No. 1 Lake Park", }, { key: "3", name: "Joe Black", age: Math.random() * 20, address: "Sidney No. 1 Lake Park", }, ]; wie diese Modifikation ... eigentlich ist die endgültige Summe nicht korrekt.

@yesmeck https://codesandbox.io/s/xjpkx9rzzw Diese Demo hat ein Problem, wenn Sie links von fest setzen, können Sie sehen, dass der Stil durcheinander ist。

Ich habe es mit dem Komponenten-Wrapper geschafft, aber es ist etwas umständlich. Code sieht so aus

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      localData: props.data,
    };

    this.tableRef = React.createRef();
  }

  handleTableUpdate = () => {
    this.setState({ localData: this.tableRef.current.getLocalData() });
  }

  render() {
    return (
      <Table
        ref={this.tableRef}
        columns={this.props.columns}
        dataSource={this.props.data}
        onChange={this.handleTableUpdate}
        components={{
          body: {
            wrapper: (props) => (
              <BodyWithSummary
                columns={this.props.columns}
                data={this.state.localData}
                {...props}
              />
            ),
          },
        }}
      />
    );
  }
}

function BodyWithSummary(props) {
  const { data, columns, ...otherProps } = props;
  return (
    <tbody {...otherProps}>
      <React.Fragment>
        {data && data.length > 0 && (
          <tr>
            {props.columns.map((col) => renderColumn(col, data))}
          </tr>
        )}
        {props.children}
      </React.Fragment>
    </tbody>
  );
}

Das Ärgerliche ist, dass ich getLocalData aufrufen muss, wenn die aggregierten Daten in den gefilterten Zeilen berechnet werden sollen.
Wäre viel schöner, wenn der Body Wrapper die Tabellenreferenz als Requisite erhalten würde oder eine einfachere Möglichkeit hätte, auf die gerenderten Daten zuzugreifen (props.children ist eine Liste von Reaktionsknoten, die für die Berechnung der Aggregate nicht sehr nützlich ist).

Könnten wir footer prop verwenden, aber anstelle eines zusätzlichen div in der Tabelle rendern?

Vorübergehend so behandelt:

      .ant-table-footer {
        padding: 0;
      }

                                    footer={(currentPageData)=>{
                                        return (
                                            <Row style={{marginRight:17}}>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>合计</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4}>
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                            </Row>
                                        );
                                    }}

Es ist nicht perfekt.

Freuen Sie sich auf den Fuß der Säulen, die bald herauskommen. O (∩_∩) O.

@ybning Haben Sie Probleme mit festen Spalten? Viele dieser festen Spalten haben Probleme. .

@yesmeck Ihr Beispiel https://codesandbox.io/s/rrpo02qwkq
Navigieren Sie zu Seite 2 und kehren Sie dann zu Seite 1 zurück. Die Daten werden bei jeder Navigation dupliziert.

Gibt es ein Update für dieses Problem?

@linrf nein, ich hoffe jemand kann dieses Problem lösen

So was.
https://codepen.io/chaegumi/pen/OaqxVd

Könnten wir eine total Requisite hinzufügen, um Aggregationsstatistiken zu behandeln?
total unterscheidet sich von footer ,
Akzeptieren Sie nur eine Funktion zum Behandeln von Spaltendaten. Der Standardwert ist reduce

Ich habe endlich die Summe in die Spalte gesetzt

Das Rendern des Inhalts der Tabellenfußzeile von antd ist nicht einfach zu verwenden, insbesondere wenn die Tabelle selbst feste Spalten enthält.

Sie können die Art und Weise ändern, um dies mit zwei Tabellen zu erreichen, eine zum Rendern der ursprünglichen Tabelle und die andere zum Rendern des unteren Fußzeilenelements. Blenden Sie bei der Stilabdeckung den Kopf der Tabellenfußzeile und die Bildlaufleiste des ursprünglichen Tabellenlaufbereichs aus. Fügen Sie abschließend JS-Code hinzu, um die horizontalen Bildlaufpositionen der beiden Tabellen auszurichten, und es ist fast gleich.

Komponenten:

import React, { PureComponent } from 'react';
import { Table } from 'antd';
import styles from './index.less';

export default class ChartTable extends PureComponent {
  constructor(props) {
    super(props);

    this.refBox = React.createRef();
  }
  componentDidMount() {
    const tableList = Array.from(this.refBox.current.querySelectorAll('.ant-table-body'));
    this.tableList = tableList;
    tableList.forEach((table) => {
      table.addEventListener('scroll', this.handleTableScroll);
    });
  }
  componentWillUnmount() {
    this.tableList.forEach((table) => {
      table.removeEventListener('scroll', this.handleTableScroll);
    });
  }
  handleTableScroll = (e) => {
    const current = e.currentTarget;
    this.tableList.forEach((table) => {
      if (table !== current && table.scrollLeft !== current.scrollLeft) {
        table.scrollLeft = current.scrollLeft;
      }
    });
  }
  renderFooterTable = () => {
    const { columns, dataSource } = this.props;
    const dataList = [{
      department: '合计',
    }];
    return (
      <Table
        className={styles.footerTable}
        pagination={false}
        scroll={{ x: 'max-content' }}
        size="small"
        columns={columns}
        dataSource={dataList}
      />
    );
  }
  render() {
    return (
      <div ref={this.refBox}>
        <Table
          className={styles.mainTable}
          pagination={false}
          scroll={{ x: 'max-content', y: 350 }}
          size="small"
          columns={this.props.columns}
          dataSource={this.props.dataSource}
        />
        {this.renderFooterTable()}
      </div>
    );
  }
}

Style Coverage-Datei:

mainTable {
  :global {
    .ant-table-body::-webkit-scrollbar {
      display: none;
    }
  }  
}
.footerTable {
  border-top: 1px solid #e8e8e8;

  :global {
    thead {
      display: none;
    }
  }
}

+1 Würde gerne eine Möglichkeit haben, Spaltenaggregationen in der Fußzeile anzuzeigen.

Dies kann mit Komponenten Prop implementiert werden.

const __Table = (totalsRow = initTotals(), key='tableKey') => ({
    className,
    style,
    children
}) => (
    <table className={className} style={style} key={key}>
        {children}
        <tfoot>
            <tr>
                // add tfoot td here
            </tr>
        </tfoot>
    </table>
);

const TableWithTFoot = ({allData, columns}) =>
    <Table
        dataSource={allData.data}
        columns={columns}
        pagination={false}
        components={{ table: __Table(allData.totals) }}
    />

@rororofff hat 5,00 USD für diese Ausgabe finanziert.

• Senden Sie eine Pull-Anfrage über IssueHunt , um diese Belohnung zu erhalten.
• Möchten Sie einen Beitrag leisten? Machen Sie sich über vertraut .
• Überprüfen Sie den anzuzeigen .
• Benötigen Sie Hilfe von Entwicklern? Fügen Sie Ihr Repository auf IssueHunt hinzu, um Spenden zu sammeln.

@piuccio Nach deinen Gedanken schreibe ich es mit Typoskript.

https://github.com/Arweil/antd-ext/blob/master/src/TableExt/TableExt.tsx

https://github.com/ant-design/ant-design/issues/5710#issuecomment -450855438

this.refBox = React.createRef();

Ich benutze dieses Versionspaket, dieser Code ist fehlgeschlagen.
"antd": "2.13.14", "react": "15.4.0", "react-dom": "15.4.0"

Fehlermeldung
Uncaught TypeError: _react2.default.createRef is not a function at new EstimationReport (psReport.js?18c1:47) at eval (ReactCompositeComponent.js?063f:295) at measureLifeCyclePerf (ReactCompositeComponent.js?063f:75) at

@carvendy Es ist wahrscheinlich Ihre react . Versuchen Sie es zu ändern

import from 'react';

das sehr gut finden:

import * as react from 'react'

Ich habe eine Komponente gemacht,
Verwenden Sie das Spaltenmodell, um die Fußzeile zu rendern
Bildlaufleisten werden derzeit jedoch nicht unterstützt.

import React from 'react';

class TableFooter extends React.Component {
  render() {
    const { dataSource, columns } = this.props;
    return (
      <table className="ant-table">
        <colgroup>
          {columns.map((colModel, index) => {
            return <col style={{
              width: colModel.width,
              minWidth: colModel.width
            }} key={index} />
          })}
        </colgroup>
        <tfoot >
          <tr >
            {columns.map((colum, idxCol) => {
              return <td style={{ padding: "0px 8px" }} className={colum.className} key={idxCol}>
                <strong>
                  {colum.footerContent ? colum.footerContent : (colum.footerSum ? dataSource.reduce((sum, record) => sum + parseFloat(record[colum.key]), 0) : "")}
                </strong>
              </td>
            })}
          </tr>
        </tfoot>
      </table>
    )
  }
}
export default TableFooter;

Seitenaufruf

...
render() {
  const columns = [
      {
        key: 'productName'
        footerContent: 'SUM:',
      },
      {
        key: 'quantity',
        footerSum: true,
      }
    }
];
return (
  <Table
    columns={columns}
    dataSource={dataSource}
    footer={()=> {
        return (
           <TableFooter dataSource={dataSource} columns={columns} />
        )
       }
    }
  />
)
....

var data = this.getLocalData ();
var current;
var pageSize;
var state = this.state; // Wenn kein Paging vorhanden ist, werden standardmäßig alle angezeigt

  if (!this.hasPagination()) {
    pageSize = Number.MAX_VALUE;
    current = 1;
  } else {
    pageSize = state.pagination.pageSize;
    current = this.getMaxCurrent(state.pagination.total || data.length);
  } // 分页
  // ---
  // 当数据量少于等于每页数量时，直接设置数据
  // 否则进行读取分页数据


  if (data.length > pageSize || pageSize === Number.MAX_VALUE) {
    data = data.filter(function (_, i) {
      return i >= (current - 1) * pageSize && i < current * pageSize;
    });
  }

  return data;
}

Dies ist der Quellcode der Tabellenverarbeitungsdaten. Können Sie hier eine Funktion hinzufügen, um die Summe der Listenwerte zu berechnen, die Gesamtzahl der Daten bei der Ausgabe zu addieren und die gerade hinzugefügten Daten von der Seite und der Seitengröße @sorrycc zu subtrahieren

Nach 2 Jahren besteht dieses Problem immer noch.

Nach 2 Jahren besteht dieses Problem immer noch.

Ich habe ursprünglich die Methode zum Ändern des Renderings zum Umschreiben von Spalten und zum Anhängen von Daten in der nicht ausgelagerten Tabelle verwendet:

Wenn jedoch bei einer Paginierung mehrere Daten hochgeladen werden, werden diese gelöscht. Https://github.com/ant-design/ant-design/blob/fee5e291632cce131611dd1a9e2ab89e02ee43a3/components/table/Table.tsx#L407

Ich möchte PR, habe aber Angst, dass mein API-Design nicht den Anforderungen meines Chefs @ afc163 entspricht ...

Nach 2 Jahren besteht dieses Problem immer noch.

die neue Tabelle auf dem Weg. Ich freue mich auf die neue Tabelle

https://github.com/ant-design/ant-design/issues/16911#issuecomment -523423460

@ alexchen1875 Das hat nichts damit zu

@ alexchen1875 Das hat nichts damit zu

Lesen Sie die Anweisungen auf dem Tabellenabschnitt sorgfältig durch.

@ alexchen1875 super !

Ich möchte eine PR einreichen und vorübergehend die Requisiten "Daten dürfen keine Daten zuschneiden" hinzufügen, um das Überspringen von https://github.com/ant-design/ant-design/blob/61e319b66826530a1882c20a41862a15d57b120a/components/table/Table.tsx zu unterstützen Die # L408 macht https://github.com/ant-design/ant-design/issues/5710#issuecomment -524164125 auch für Paging verfügbar. Ich weiß nicht, ob das Team akzeptiert ...

Ich habe diese Demo geändert,
Unterstützung für feste Spalten , Header-Gruppierung , Zusammenführen von Zellen und Scrollen hinzugefügt,
Ich habe \ verwendet

👉 neue Demo-Adresse

Verwendung :

const calcRow = [
    {
        colspan: 2,
        render: () => 'total'
    },
    {
        render: sum => sum('age')
    },
    {
        render: sum => sum('score')
    }
]

antd v4 hatte Table summary : https://github.com/ant-design/ant-design/issues/21656

https://ant.design/components/table/#components -table-demo-summary

antd v4 hatte Table summary : # 21656 unterstützt

https://ant.design/components/table/#components -table-demo-summary

antd4 unterstützt die Zusammenfassung, aber ich bin der Meinung, dass diese Zusammenfassung noch iteriert werden muss. Die derzeitige Verwendung ist zwar kostenlos, hat jedoch zur Folge, dass der Code zu umständlich ist und nicht der ursprünglichen Absicht von antd4 entspricht, einfacher zu werden

Ein häufig verwendetes einfaches Szenario besteht darin, die Daten der aktuellen Seite zusammenzufassen. Die benutzerfreundliche Erfahrung sollte darin bestehen, summary: true in der Cloumn direkt zu konfigurieren, damit der Code aufgeräumt und einheitlich ist. Viele komplexe Szenarien können die aktuelle Zusammenfassungsleiste verwenden.