複数の注文を含むリストが必要です。各注文は一意にすることも、複数の注文を結合することもできます。各注文の下に別のテーブルが表示されます。上の図を参照してください。 各行の動作は異なり、マージコードは公式サイトでいくつかの例を通してまとめられています。 <テンプレート> <div class="アプリコンテナ"> <div> <el-テーブル :data="テーブルデータ" スタイル="幅: 100%;マージン下部: 20px;" :span-method="配列スパンメソッド" 行キー="id" 国境 > <el-table-column type="expand"> <テンプレート スロット スコープ="props"> <el-テーブル クラス="テーブル内テーブル" :show-header="false" :data="props.row.datas" スタイル="幅: 100%;" 行キー="id" :span-method="配列スパンメソッド" 国境 > <el-table-column type="expand"> <テンプレート スロット スコープ="props"> <el-テーブル クラス="テーブル内テーブル" :data="props.row.datas" スタイル="幅: 100%;" 行キー="id" 国境 > <el-table-column prop="date" label="注文日" width="180"></el-table-column> <el-table-column prop="type" label="ドキュメントタイプ" width="180"></el-table-column> <el-table-column prop="ステータス" label="ステータス"></el-table-column> <el-table-column label="操作" width="120"> <テンプレート スロット スコープ="props"> <el-button type="text" size="small">削除</el-button> </テンプレート> </el-table-column> </el-table> </テンプレート> </el-table-column> <el-table-column prop="applyNo" label="申請番号" width="132.2"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="住所"></el-table-column> </el-table> </テンプレート> </el-table-column> <el-table-column prop="applyNo" label="申請番号" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="住所"></el-table-column> <el-table-column label="操作" width="120"> <テンプレート スロット スコープ="props"> <el-button type="text" size="small">削除</el-button> </テンプレート> </el-table-column> </el-table> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: "name1", コンポーネント: {}, データ() { 戻る { テーブルデータ: [ { id: 1, 申請番号: "202004291234", 名前:「李思」 住所:「上海市普陀区金沙江路1518号」 }, { id: 2, 申請番号: "202004291235", 名前:「張三」 住所:「上海市普陀区金沙江路1517号」 }, { id: 3, 適用番号: "202004291236,202004291237", 名前: 「王武」、 住所:「上海市普陀区金沙江路1519号」 データ: [ { id: 31, 申請番号: "202004291236", 名前: 「王武」、 住所:「上海市普陀区金沙江路1519号」 データ: [ { id: 31, 日付: "2016-05-01", タイプ: "タイプ1", ステータス: 「発送済み」 }, { id: 32, 日付: "2016-05-01", タイプ: "タイプ2", ステータス: 「未発送」 } ] }, { id: 32, 申請番号: "202004291237", 名前: 「王武」、 住所:「上海市普陀区金沙江路1519号」 } ] }, { id: 4, 申請番号: "202004291238", 名前: "赵6六", 住所:「上海市普陀区金沙江路1516号」 } ] }; }, メソッド: { 配列スパンメソッド({ 行、列、行インデックス、列インデックス }) { if (!row.datas) { 列インデックス === 0 の場合 { [0, 0]を返します。 } そうでない場合 (列インデックス === 1) { [1, 2]を返します。 } } } } }; </スクリプト> <style lang="scss" スコープ> .app-コンテナ{ ::v-ディープ{ .el-table th { 背景: #ddeeff; } .el-table__展開セル{ 下境界線: 0px; 右境界線: 0px; パディング: 0px 0px 0px 47px; } } .テーブルインテーブル { 上境界線: 0px; } } </スタイル> 注意: ここで注意すべき点は、公式のデフォルトが children であるため、子ノードはchildren を使用できないことです。そのため、他のドロップダウンコンポーネントが td 幅を設定する場合、内側のレイヤーと外側のレイヤーの差は 47.8 であることに注意してください。 要素テーブルの多層ネスト表示の実践に関するこの記事はこれで終わりです。多層ネスト要素テーブルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: CentOS7 で docker を使用して Apollo 構成センターをデプロイする実装
目次ハッシュと履歴の違いハッシュ履歴getCurrentLocation の実装setupListe...
目次1. プロジェクトの説明1.1 背景1.2 実装設計1.2.1 従来の方法1.2.2 最適化され...
mysqldump ツールのバックアップデータベース全体をバックアップする $> mysqld...
目次TypeScript環境の構築ステップ1: Taobaoミラーをダウンロードするステップ2: T...
序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...
<br />原文: http://andymao.com/andy/post/104.h...
今日は、興味深いトピックについてお話ししましょう。データベースとテーブルを分割することを検討する前に...
1. まずシステムにmysqlがインストールされているかどうかを確認します rpm -qa | gr...
Apache Tika は、さまざまな形式のファイルからファイル タイプを検出し、コンテンツを抽出す...
最近、モバイル ページを開発しているときに、ページの幅が 100% の場合、高さは幅の半分になり、携...
[LeetCode] 181.従業員の収入が管理職よりも多い従業員テーブルには、マネージャーを含む...
HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...
ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...
目次1. Antデザインビュー1. 公式ウェブサイトアドレス2. 使い方3.電子書籍テーブルを表示す...
I. 厳密モードの説明MySQL 5.0 以降の厳密モード (STRICT_TRANS_TABLES...