最近、新しいプロジェクトを開始し、独自のテーブル カプセル化について簡単に説明しました。 問題分析カプセル化の理由まず、なぜカプセル化するのでしょうか。それは技術の追求のためでしょうか。いいえ、怠惰のためです。コードを貼り付けたりコピーしたりし続けるのは嫌なので、テーブルをカプセル化したいのです。新しいテーブルを作成するときは、データを入力するだけで済みます。 パッケージの内容は何ですか?主なものは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つ目はボタン操作です。ボタンは実際には多くの種類に分けられます ボタンの種類
コード記述 上記を通じて、テーブルのすべての問題を分析しました。あとはコードを入力するだけです。 最初のケース <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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: VMware Workstation 15 Pro インストール ガイド (初心者向け)
>>: MySQLで自動作成時間と変更時間を設定する方法の例
CSS3 の角丸や影の効果を使ったページを作りたいのですが、IE ブラウザでは対応していません。こ...
目次必要データを取得して送信するテンプレートフィルターフィルターの使用シナリオ要約する必要Vue を...
おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...
前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...
目次空の文字列 '' と null を比較するケース1: 空の文字列を使用する ...
ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...
1. テキストの書式設定: この例では、HTML ファイル内のテキストを書式設定する方法を示します...
この記事では、Vue.jsの具体的なコードを共有して、シンプルな折りたたみパネルを実装する例を紹介し...
Bツリーインデックス異なるストレージ エンジンでは、異なるストレージ構造を使用する場合もあります。た...
コードをコピーコードは次のとおりです。 <object classid="clsid...
導入:インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質に...
目次1. MySQLの関数の説明2. 単行関数の分類3. キャラクター機能4. 数学関数5. 日付と...
この記事では、ドラッグアンドドロップをJSオブジェクト指向で実装するための具体的なコードを参考までに...
Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...
最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...