SPA、テーブル、ページネーションのダイナミックツリープロジェクト開発

 

アイデア:

1、バックアップする準備ができて(左側のツリー、ページングクエリとの記事)

2、データバインディングの木の左側は elementui メニューをラベルに

3、記事の一覧を表示するのに使用されるカスタムコンポーネントを追加します

図4に示すように、結合 elementui 完全なページング機能によって提供されるページング・コンポーネント

バックグラウンドデータ
t_vue_userの
t_vue_tree_nodeの
t_vue_articles

NavMenu動的に生成されたナビゲーションメニュー(メニューはのみレベル2をサポートしています)

结构
<EL-メニューキー= ""インデックス= "">
<EL-サブメニュー>
<テンプレートスロット= "タイトル">
<I CLASS = "EL-アイコン位置"> </ I>
<スパン>导航一</スパン>
</テンプレート>
<テンプレートスロット= "タイトル">分组一</テンプレート>
<EL-メニュー項目のルート= "">

VUE + EL-メニューの枝と現在のルーティング設定項目達成するための要素アセンブリ
<EL-メニュールータ:アクティブデフォルト=「$のroute.pathを」>
<EL-メニュー項目のインデックス=「/会社/ 『のUserManager』」>ユーザー管理</ EL-メニュー項目>

注1:ジャンプは、ルーティングを達成するために、エル・メニューのルータの追加属性タグ、そして限り、各タグ・エル・メニュー項目として
インデックス属性がURLに設定することができますジャンプをルーティングするために達成エル・メニュー項目をクリックします。
注2:ナビゲーション現在の項目、バインド・エル・メニュー]タブを:デフォルトのアクティブ=「$のroute.path 」、 結合特性に注意し、
追加することを忘れないでください「:」場合は$ route.path等しいエル・メニュー属性値のインデックスは、現在のアイテムのアイテムにタグを付ける-itemとき。

注3:背景t_tree_nodeテーブルにはURLが空である複数のノードを持っている、それはスタイルは一貫して、いくつかのノードにつながります

数据表格
<EL-テーブル:データ= "結果"スタイル= "幅:100%;" :ボーダー= "真" MAX-高さ= "550">
<エル・テーブルの列は、プロペラ= "ID"ラベル= "ID"最小幅= "10" = "センター"> </ EL-テーブル列を揃えます>
<EL-テーブル列プロパ= "タイトル"ラベル= "标题"最小幅= "20"> </ EL-テーブル列>
<EL-テーブルカラムプロップ= "本体"ラベル= "内容"分-width = "70"> </ EL-テーブル列>
</ EL-テーブル>

	<! -分页条- > 

		</エル・テーブル> 
		<EL-ページネーションのスタイル= "マージントップ:20ピクセル;" 電流変化= "handleCurrentChange" @サイズ変化= "handleSizeChange" 
		 現在のページ= "formInline.page":ページサイズ= "[10、20、30、50]":ページサイズ= "100"レイアウト= "合計サイズ、PREV、ページャ、次に、ジャンパー" 
		 :合計= "合計"> 
		</ EL-ページ付け>

  

<! -搜索筛选- > 
		<EL-形式:インライン= "真":モデル= "formInline"クラス= "ユーザー検索"> 
			<EL-フォーム項目のラベル= "搜索:"> 
				<EL-入力サイズ= = "formInline.title"プレースホルダ"小" Vモデル= "输入文章标题"> </ EL-入力> 
			</ EL-フォーム項目> 
			<EL-フォーム項目> 
				<EL-ボタンサイズ=」小さな」タイプ= "主"のアイコン= "エル・アイコン・サーチ" @ =]をクリックします""検索>搜索</ EL-ボタン> 
			</ EL-フォーム項目> 
		</ EL-フォーム>

  

 

 Articles.vueビュー/ sysのパスにファイルを作成します

 

おすすめ

転載: www.cnblogs.com/omji0030/p/11442076.html