Vue.jsは背景テーブルコンポーネントのカプセル化を管理します

Vue.jsは背景テーブルコンポーネントのカプセル化を管理します

最近、新しいプロジェクトを開始し、独自のテーブル カプセル化について簡単に説明しました。

問題分析

カプセル化の理由

まず、なぜカプセル化するのでしょうか。それは技術の追求のためでしょうか。いいえ、怠惰のためです。コードを貼り付けたりコピーしたりし続けるのは嫌なので、テーブルをカプセル化したいのです。新しいテーブルを作成するときは、データを入力するだけで済みます。

パッケージの内容は何ですか?

主なものは2つあり、1つはテーブルコンポーネント、もう1つはページングコンポーネントです。

これを理解したら、コンポーネントのパッケージ化を開始できます。

テーブルコンポーネントをカプセル化する

データ形式を確認する

まずデータ形式を決定します。そのためにはel-tableコンポーネントを確認する必要があります。

<el-table :data="テーブルデータ" スタイル="幅: 100%">
   <el-table-column prop="date" label="日付" width="180" />
   <el-table-column fixed="right" label="操作" width="100">
      <テンプレート スロット スコープ="スコープ">
        <el-button @click="handleClick(scope.row)" type="text" size="small">表示</el-button>
        <el-button type="text" size="small">編集</el-button>
     </テンプレート>
   </el-table-column>
</el-table>

ここで、レベル、プロパティ、幅、ボタン タイプ、イベントなどのデータ タイプについて考えてみましょう。

パラメータタイプ = {
  data: 配列, // データの読み込み: ブール値,
  選択表示: ブール値、
  列:配列 = [
    { 
      ラベル: 文字列、
      プロパティ: 文字列、
      フィルター: 関数、
      isSlot: ブール値、
      幅: 数値、
      テンプレート: 関数、
      btns: 配列 = [
        { 名前: 文字列,
          btnType: 文字列、
          クリックタイプ: 文字列、
          ルータータイプ: 文字列、
          url: 文字列、
          クエリ: 関数、
          btnClick: 機能
        }
      ]
    }
  ] 
}

データドキュメントを定義したら、コンポーネントのカプセル化を開始できます。

パッケージコンポーネント

グローバルコンポーネントのカプセル化

グローバル コンポーネントをカプセル化する理由は、トラブルを回避し、怠惰にすることです。

src の下にコンポーネント ファイルを作成し、その中にコンポーネントを記述します。メンテナンスを容易にするために、各コンポーネントを別々のフォルダーに配置することをお勧めします。

独自の table.vue コンポーネントを作成します。私のコンポーネントは FrTable と呼ばれます。今は内容については話さず、まず参照についてお話ししましょう。

グローバル使用

FrTableファイルをコンポーネントの下のindex.jsファイルにインポートし、ここですべてのコンポーネントを走査してエクスポートします。

コードは次のとおりです。

'./FrTable/index' から TrTable をインポートします。

const コンポーネント = [TrTable]

const インストール = (Vue) => {
  コンポーネント.map(コンポーネント => {
    Vue.component(コンポーネント名、コンポーネント)
  })
}

if (typeof Window !== 'undefined' && window.Vue) {
  インストール(Window.Vue)
}

エクスポートデフォルト{
  インストール
}

次にそれをmain.jsにエクスポートし、次のようにVue.use()を通じてコン​​ポーネントを使用します。

'@/components/index' から globalComponents をインポートします。
Vue.use(グローバルコンポーネント)

ページ内での使用

<fr-テーブル />

テーブルコンポーネントのカプセル化

検討すべき質問

表にはケースがいくつありますか?

  • 通常のデータタイプの表示
  • ユニークな表示方法
  • 操作ボタン付き

最初のタイプでは、実際にはあまり多くのことを行う必要はなく、 for ループを通じてレンダリングするだけです。

2番目は実際には大丈夫です。スロットでカスタマイズできます

3つ目はボタン操作です。ボタンは実際には多くの種類に分けられます

ボタンの種類

  1. ボタンの通常の使用、クリック機能
  2. ボタンジャンプ機能
  3. ボタンをクリックすると新しいページが開きます
  4. ボタンはカスタムイベントとして機能します

コード記述

上記を通じて、テーブルのすべての問題を分析しました。あとはコードを入力するだけです。

最初のケース

<el-table :data="データ" border :loading="読み込み中">
        <!-- チェック -->
   <el-table-column v-if="selectionShow" type="selection" width="50" align="center" :reserve-selection="true" />
     <template v-for="(item, index) 列内">
        <el-table-column :key="index" v-bind="item">
            <!-- カスタム ヘッダー -->
          <テンプレート v-if="item.customHeader" slot="ヘッダー">
              <スロット:name="item.headerProp" />
          </テンプレート>
          <テンプレート スロット スコープ="スコープ">
               <span v-html="handleFilter(アイテム、スコープ行、アイテムプロパティ)" />
          </テンプレート>
        </el-table-column>
     </テンプレート>
 </el-table>

ここでhandleFilterメソッドを見てみましょう

このメソッドはデータを処理します。

データ型は、通常のデータ型、変換が必要なデータ型、テンプレートによって変換されるデータ型に分けられます。

コードは次のとおりです

ハンドルフィルター(アイテム、値、プロパティ) {
  値 = val[prop]とする
  if (item.templet) 値 = item.templet(val)
  item.filter を返します? this.$options.filters[item.filter](val[prop]) : value
},

最初のケースは比較的単純で、単純なデータレンダリングとカスタマイズされたヘッダーレンダリングだけです。上記全体は、複数選択関数+通常の形式です。

2番目のケース

カスタマイズされたリスト

<テンプレート スロット スコープ="スコープ">
   <!-- カスタムコンテンツ -->
   <スロット
      v-if="item.isSlot"
      :name="アイテム.prop"
      :row="スコープ.row"/
   >
</テンプレート>

カスタムカテゴリの場合は、isSlotをtrue、nameをprop、rowをdataに設定するだけです。

3番目

3番目のボタンには4つの状況があります

<テンプレート v-if="item.btns">
   <el-ボタン
     v-for="(btn, i) が item.btns 内にあります"
     :key="i"
    クラス="mr_10"
    :size="btn.mini ? btn.mini: 'small'"
    :type="btn.type ? btn.type: 'プライマリ'"
    @click="btnClickfunc(btn, スコープ.行)"
  >
     {{ btn.name }}
  </el-button>
</テンプレート>

ボタンは実際にはループ内でレンダリングされ、主にイベント分析のために btnClickfunc イベントを通じて操作されます。

btnClickfunc(列、行) {
      定数パス = {
        [column.routerType]: column.url,
        クエリ: column.query ? column.query(row): ''
      }
      (column.clickType === 'ルーター')の場合{
        this.$router.push(パス)
      } そうでない場合 (column.clickType === 'router_blank') {
        const ルートデータ = this.$router.resolve(パス)
        window.open(routeData.href, '_blank')
      } そうでない場合 (column.clickType === 'btnClick') {
        column.btnClick(行)
      } それ以外 {
        this.$emit('btnClickFunc', { 列: 列、行: 行 })
      }
},

当社では、製品の種類に応じて取り扱い方法が異なります。

小道具の価値

現在のパラメータは定義したパラメータと一致しているので、コードは次のようになります。

  // データ: {
      タイプ: 配列、
      必須: true
    },
    // テーブルヘッダーパラメータ列: {
      タイプ: 配列、
      必須: true
    },
    読み込み中:
      タイプ: ブール値、
      デフォルト: false
    },
    //複数選択ボックス選択表示: {
      タイプ: ブール値、
      デフォルト: false
    },

これからは、コンポーネントをどのように使用するかだけが残ります。

コンポーネントの使用

<fr-テーブル
      ref="mt"
      :loading="読み込み中"
      :data="リスト"
      :columns="列"
    >
</fr-table>

大体以下の通りです。複数選択が必要な場合は自分でメソッドを定義してください。並び替えも同様です。

ページングコンポーネントのカプセル化

要素ページングコンポーネントを参照

<el-ページネーション
  スタイル="margin-top:40px;"
  背景
  レイアウト="前へ、ページャ、次へ"
  :page-size="ページ制限"
   :total="合計"
   :current-page="現在のページ"
   @current-change="現在の変更を処理する"
/>
現在の変更を処理する(val) {
   コンソール.log(値)
}

データ定義

定義は次のとおりです。

合計: 数、
ページ制限: 数値、
現在のページ: 番号、

カプセル化

<el-ページネーション
  スタイル="margin-top:40px;"
  背景
  レイアウト="前へ、ページャ、次へ"
  :page-size="ページ制限"
  :total="合計"
  :current-page="現在のページ"
  @current-change="現在の変更を処理する"
/>

現在の変更を処理する(val) {
   this.$emit('currentChange', val)
}

シンプルに見えますね。本当にシンプルです。

次に、ページング イベントとパラメーターをコンポーネントに追加して、テーブル全体のコンポーネントのカプセル化を完了します。これで、テーブル コンポーネント全体をカプセル化する作業はすべて完了しました。

要約する

vue.js 管理背景テーブルコンポーネントのカプセル化に関するこの記事はこれで終わりです。より関連性の高い vue 背景テーブルカプセル化コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js+boostrapプロジェクト実践(事例詳細説明)
  • Vue.jsでタブ切り替えと色変更操作を実装する解説
  • Vue.js での $emit の使用に関する詳細な説明
  • Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明
  • Vue.jsはカレンダー機能を実装します
  • Vue.jsはタイムライン機能を実装します
  • Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践
  • 大規模な Vue.js プロジェクトの構築と維持のための 10 のベスト プラクティス

<<:  VMware Workstation 15 Pro インストール ガイド (初心者向け)

>>:  MySQLで自動作成時間と変更時間を設定する方法の例

推薦する

複数の例で HTML フォームを使用する方法

参考までに、HTMLフォームの使い方を9つの簡単な例で分析します。具体的な内容は次のとおりです。 1...

Dockerfileを使用してDockerイメージを構築する

目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...

CSS3 は 3D キューブの読み込み効果を作成します

簡単な説明これは CSS3 のクールな 3D キューブのプリロード効果です。この特殊効果は、シンプル...

Dockerはコンテナポートバインディングのローカルポートを実装します

今日、イメージを起動した後、HTTP リクエスト経由でアクセスできないという小さな問題が発生しました...

MySQL の null (IFNULL、COALESCE、NULLIF) に関する知識ポイントのまとめ

この記事では、MySQL の null (IFNULL、COALESCE、NULLIF) に関連する...

ランダムロールコールテーブルを実装するためのネイティブJavaScript

この記事では、JavaScriptのランダムロールコールテーブルの具体的なコードを参考までに紹介しま...

オペレーターが知っておくべき 18 個の Nginx プロキシ キャッシュ構成のヒント (どれを知っていますか?)

アプリケーションや Web サイトのパフォーマンスが成功の重要な要素であることは誰もが知っています。...

NODE.JS を使用して WEBSERVER を作成する手順

目次Node.jsとはNodeJSをインストールするNode を使用して Hello World を...

TypeScript ジェネリックを簡単に説明する方法

目次概要ジェネリック医薬品とはビルドシステムジェネリック医薬品の一般的な理解ジェネリッククラスジェネ...

Bツリー挿入プロセスの概要

前回の記事 https://www.jb51.net/article/154153.htm では、B...

Nginx レイヤー 4 負荷分散構成ガイド

1. レイヤー4負荷分散の概要レイヤー 4 ロード バランシングとは何ですか?いわゆる 4 層負荷分...

Tomcat マルチインスタンスの展開と構成の原則

1. ファイアウォールをオフにし、Tomcatのインストールに必要なソフトウェアパッケージを/opt...

Nginx 運用保守ドメイン名検証方法例

インターフェイス ドメイン名を構成する際、各パブリック プラットフォームはドメイン名に対する開発者の...

jsはaudioContextを通じて3Dサウンド効果を実現します

この記事では、audioContextを介して3Dサウンド効果を実現するためのjsの具体的なコードを...

JS関数の継承について学ぶ記事

目次1. はじめに: 2. プロトタイプチェーン継承: 3. コンストラクタ継承の借用(オブジェクト...