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で自動作成時間と変更時間を設定する方法の例

推薦する

IE6、IE7、IE8 で CSS3 の丸い角と影のスタイルをサポートする

CSS3 の角丸や影の効果を使ったページを作りたいのですが、IE ブラウザでは対応していません。こ...

Vueでフォームデータを取得する方法

目次必要データを取得して送信するテンプレートフィルターフィルターの使用シナリオ要約する必要Vue を...

ウェブページ制作TDは隠し表示もオーバーフロー可能

おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...

異なるインデックスを更新してMySQLのデッドロックルーチンを解決する

前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...

Vue で className として空の文字列を使用することはなぜ推奨されないのですか?

目次空の文字列 '' と null を比較するケース1: 空の文字列を使用する &#...

HTML 9グリッドレイアウトの実装方法

ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...

HTML テキストフォーマットの簡単な例 (詳細な説明)

1. テキストの書式設定: この例では、HTML ファイル内のテキストを書式設定する方法を示します...

Vue.jsはシンプルな折りたたみパネルを実装します

この記事では、Vue.jsの具体的なコードを共有して、シンプルな折りたたみパネルを実装する例を紹介し...

MySQL B-Tree インデックスの簡単な分析

Bツリーインデックス異なるストレージ エンジンでは、異なるストレージ構造を使用する場合もあります。た...

Firefox で Flash を再生するためのオブジェクトとパラメータの書き方

コードをコピーコードは次のとおりです。 <object classid="clsid...

MySQL データベースを最適化する 8 つの方法の詳細な説明 (必読の定番)

導入:インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質に...

非常に実用的なMySQL関数の包括的な概要、詳細な例の分析チュートリアル

目次1. MySQLの関数の説明2. 単行関数の分類3. キャラクター機能4. 数学関数5. 日付と...

ドラッグ効果を実現するための js オブジェクト指向メソッド

この記事では、ドラッグアンドドロップをJSオブジェクト指向で実装するための具体的なコードを参考までに...

Docker を使用して Spring Boot をデプロイする方法

Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...

ウェブサイトがhttpsを有効にした後のSSLのセキュリティ構成と検出

最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...