実際のプロジェクトでElementUIを使用する手順の詳細な説明

<!-- 1. フィールドでソートする必要があるフィールド名を定義します-->
 
<el-table :data="リスト" border :default-sort="{prop: 'workNumber'}">
</el-table>
 
<!-- 2. フィールド列に prop 属性と sortable 属性が宣言されていることを確認します -->
 
<el-table-column label="求人エントリー時間" sortable prop="timeOfEntry">
</el-table-column>

データ（） {
  戻る {
    //その他を省略合計: 0,
    page: 1, // 現在のページ番号 size: 5, // ページあたりのレコード数 total: 0 // レコードの総数 }
}

<div スタイル="高さ: 60px; マージントップ: 10px">
<!-- ページネーション -->
        <el-ページネーション
          layout="total, sizes,prev, pager, next, jumper"
          :total="合計"
          :page-size="サイズ"
          :ページサイズ="[2,5,10]"
          @current-change="hCurrentChange"
          @size-change="hSizeChange"
        />
</div>

// 現在クリックされているページ番号を自動的に受け取ります hCurrentChange(curPage) {
      // アラート(現在のページ)
      // 1. ページ番号を更新する this.page = curPage
      // 2. リクエストを再送信 this.loadEmployee()
    },
    // ページあたりのアイテム数 hSizeChange(curSize) {
      // アラート(サイズ)
      // 1. ページあたりのエントリ数を更新します this.size = curSize
      // 2. リクエストを再送信 this.loadEmployee()
    },

<el-チェックボックスグループv-model="roleIds">
  <el-checkbox label="110">管理者</el-checkbox>
  <el-checkbox label="113">開発者</el-checkbox>
  <el-checkbox label="115">人事</el-checkbox>
</el-チェックボックスグループ>

データ （） {
  戻る {
    roleIds: [] // 現在選択されている権限リストを保存します}
}

<el-card クラス="ボックスカード">
  <div スロット="ヘッダー" クラス="ヘッダー">
    <span>勤務カレンダー</span>
  </div>
  <!-- カレンダー コンポーネントを配置します -->
  <カレンダー />
</el-card>

<テンプレート>
  <el-calendar v-model="現在の日付">
    <テンプレートスロット="dateCell">
      <div class="date-content">
        <span class="text">01</span>
        <span class="rest">休憩</span>
      </div>
    </テンプレート>
  </el-calendar>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      curDate: 新しい日付()
    }
  }
}
</スクリプト>

npm インストール @antv/データセット @antv/g2

<テンプレート>
  <div id="コンテナ" />
</テンプレート>
 
<スクリプト>
'@antv/data-set' から DataSet をインポートします。
'@antv/g2' から { Chart } をインポートします
エクスポートデフォルト{
  マウント() {
    定数データ = [
      { 項目: '作業効率'、a: 70、b: 30 }、
      { 項目: '出席'、a: 60、b: 70 }、
      { 項目: 'ポジティブさ'、a: 50、b: 60 }、
      { 項目: '同僚を助ける'、a: 40、b: 50 }、
      { 項目: '自主学習'、a: 60、b: 70 }、
      { 項目: '精度'、a: 70、b: 50 }
    ]
    const { データビュー } = データセット
    const dv = 新しい DataView().source(データ)
    dv.transform({
      タイプ: '折りたたみ'、
      fields: ['a', 'b'], // フィールドセットを展開 key: 'user', // キーフィールド value: 'score' // 値フィールド })
 
    const チャート = 新しいチャート({
      コンテナ: 'コンテナ',
      自動調整: true、
      高さ: 500
    })
    チャートデータ(dv.rows)
    chart.scale('スコア', {
      最小: 0,
      最大: 80
    })
    chart.coordinate('polar', {
      半径: 0.8
    })
    チャート.ツールチップ({
      共有: true、
      クロスヘアを表示: true、
      十字線:
        ライン： {
          スタイル: {
            線破線: [4, 4],
            ストローク: '#333'
          }
        }
      }
    })
    chart.axis('item', {
      行: null、
      ティックライン: null、
      グリッド: {
        ライン： {
          スタイル: {
            ラインダッシュ: null
          }
        }
      }
    })
    chart.axis('スコア', {
      行: null、
      ティックライン: null、
      グリッド: {
        ライン： {
          タイプ: 'line'、
          スタイル: {
            ラインダッシュ: null
          }
        }
      }
    })
 
    チャート
      。ライン（）
      .position('アイテム*スコア')
      .color('ユーザー')
      .サイズ(2)
    チャート
      。ポイント（）
      .position('アイテム*スコア')
      .color('ユーザー')
      .shape('円')
      .サイズ(4)
      。スタイル（{
        ストローク: '#fff',
        線幅: 1,
        塗りつぶしの不透明度: 1
      })
    チャート
      。エリア（）
      .position('アイテム*スコア')
      .color('ユーザー')
    チャート.レンダリング()
  }
}
</スクリプト>

[email protected] の npm を使用します

//多言語サポートを設定する import Vue from 'vue' //Vueを導入する
import VueI18n from 'vue-i18n' // 国際プラグインパッケージをインポート import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // Ele.me の英語パッケージをインポート import elementZH from 'element-ui/lib/locale/lang/zh-CN' // Ele.me の中国語パッケージをインポート Vue.use(VueI18n) // 国際化パッケージをグローバルに登録 // 国際化プラグインのインスタンスを作成 const i18n = new VueI18n({
  //言語タイプを指定します。中国語の場合はzh、英語の場合はen。ロケール: 'zh'、
  // プラグインの言語データメッセージに elementUI 言語パックを追加します: {
    // 英語環境の言語データ en: {
      ...要素EN
    },
    // 中国語環境の言語データ zh: {
      ...要素ZH
    }
  }
})
// elementUI の言語変換関係を設定します。locale.i18n((key, value) => i18n.t(key, value))
 
デフォルトの i18n をエクスポートする