1. このフレームワークではページにエラーがある限り、404 または恐ろしいエラー インターフェイスが表示されます。
たとえば、フォームの prop 属性が見つからないか、データ関数の戻りオブジェクトで矛盾している場合、404 が報告されます。
2.辞書を使用して辞書を翻訳します。
plugins/methods.js ファイルに次を追加します
// 辞書の翻訳
selectDictLabel(データ, 値, k = '値', v = '名前') {
var アクション = []
Object.keys(datas).some(key => {
if (データ[キー][k] == '' + 値) {
アクション.push(データ[キー][v])
trueを返す
}
})
戻りアクション.join('')
}、
vueページから引用：
<el-table-column label="信息" min-width="170">
<template slot-scope="{ row }">
<エルポップオーバー
配置 = "トップスタート"
幅="100"
トリガー="ホバー"
>
<div v-for="row.batteryList の項目" :key="項目.id">
{ { dictArrStr.BATTERY_TYPE_str }}
{ { item.num }}
</div>
<el-button size="small" type="text" slot="reference">{ { row.num || '-' }}</el-button>
</el-ポップオーバー>
</テンプレート>
</el-テーブル-カラム>
データ() {
戻る {
dictArr: {
BATTERY_TYPE: [], // タイプ
TRADE_STATUS_RECOVERY:[],
}、
dictArrStr: {
BATTERY_TYPE_str: '', // 型変換
TRADE_STATUS_RECOVERY_str: '',
}
}
}、
メソッドの関数内では次のようになります。
_データを読み込む（） {
// 辞書リストインターフェースを呼び出す
this.getDictData('TRADE_STATUS_RECOVERY,BATTERY_TYPE')
}、
getDictData(discts) {
// 辞書リストインターフェースを取得
Portal.dictTypes(discts).then((resp) => {
this.dictArr = resp.data
this.dictArrStr.BATTERY_TYPE_str = this.methods.selectDictLabel(this.dictArr.BATTERY_TYPE, row.batteryType)
})
}、
3.サイドバーメニューを追加します。
1) ページ内に新しいフォルダー A と関連するサブファイルを作成し、A1、A2 という名前を付けます。
2)assets/js/centerMenu.js で、ファイルにルーティングを追加します。
評価購入: [
{
"実在物"： {
「id」: 1、
"parentMenuId": 0、
"name": "/A/A1", // ルーティングアドレス
"icon": "el-icon-rank",
"エイリアス": "メニュー名",
"状態": "有効",
「並べ替え」: 2、
「値」: null、
"タイプ": "なし",
"説明": "",
"createUserId": 1
}、
「子供たち」: null
}、
}
4.レイアウトの使い方
1) レイアウト フォルダーに、ALayout.vue という名前のレイアウト ファイルを作成します。
次に、ファイル内でデータ メソッドを見つけて、ここで変更します。
データ（） {
戻る {
modulesName: "名前",
moduleMenu: "evalbuy" // centerMenu.jsファイル内でこのキー フィールドを見つけて、メニューをレンダリングします
}
}
2) メニューをクリックします。現在のページをクリックして新しいページを開き、現在のメニューを強調表示したままにしたい場合は、layout/center/siderbar.vue ページで設定する必要があります。
activeMenu() {
// 左側には表示されていない他のルーティング メニューですが、ジャンプ後のページでは、対応するメニューを左側で強調表示する必要があります。
if (this.$route.path.includes('/center/evalsell/initiateRecyclepic')) {
this.active = '/center/evalsell/initiateRecycle' // メニューをハイライトします
else if (this.$route.path.includes('/center/evalsell/initiateTradepic')) {
this.active = '/center/evalsell/initiateTrade' // メニューをハイライトします
} それ以外 {
this.active = this.$route.path // ページを更新して、強調表示された選択内容を表示します
}
}、
5. TDK：ウェブサイトのタイトル、説明、キーワードの英語の略称です。
tdk を使用するのは、tdk がページの SEO 最適化に役立つためです。検索エンジン スパイダーが Web サイトをクロールした後、最初に目にするのは TDK です
tdkを設定するには2つの方法があります:
1) nuxt.config.jsにグローバルヘッドのTKDを設定する
2) 別のページでヘッドの TKD を設定できます。xxx.vue ファイルに hid を設定します。「name」は一意の識別子を意味します。また、ローカル ページの hid: 'name' を設定すると、グローバルな hid: 'name' が自動的にオーバーライドされます。
6. アイコンを使用します。
1) iconfont に移動して iconfont.js をダウンロードします。シンボルを選択してローカルにダウンロードします。
2) 新しいフォント フォルダ --iconfont フォルダをassets ディレクトリに作成し、そのフォルダ内に次のファイルを置きます。
3. アセットディレクトリのbase.cssに以下を導入します: @import '../fonts/iconfont/iconfont.css';
4. ページ上で使用します。
<span><i class="iconfont icon-caidanshouqi"></i></span>
経営背景:
:label="$t('cms.announced.fields.title')"、中国語のラベルを取得するにはどうすればよいですか?
システム内で