上記の効果を実現するためのコードは次のとおりです。
1.index.html
<!DOCTYPE html>
<html lang="ja">
<頭>
<!-- <meta> タグは通常、<head> 領域内にあります。
<meta> タグは、HTML ドキュメントのメタデータを提供します。メタデータはクライアントには表示されませんが、ブラウザによって解析されます。-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
<meta http-equiv="X-UA 互換" content="ie=edge" />
<title>学生情報管理システム</title>
<!-- CDN を使用して Vue モジュールを導入する -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- CSS から外部スタイル ファイルを導入する -->
<link rel="stylesheet" href="./css/index.css">
<!--要素 UI スタイルの紹介-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<!--Element コンポーネント ライブラリの紹介 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<本文>
<!-- app という名前のコンテナを作成しました -->
<div id="アプリ">
<エルコンテナ>
<!-- 高さ フォントの高さ -->
<el-header style="height: 80px;">学生情報管理システム</el-header>
<エルコンテナ>
<el-aside width="200px">
<el-menudefault-active="2" class="el-menu-vertical-demo">
<el-menu-itemindex="1">
<i class="el-icon-menu"></i>
<span slot="title">クラス管理</span>
</el-menu-item>
<el-menu-itemindex="2">
<i class="el-icon-user"></i>
<span slot="title">学生情報</span>
</el-menu-item>
<el-menu-itemindex="3">
<i class="el-icon-s-custom"></i>
<span slot="title">講師情報</span>
</el-menu-item>
<el-menu-itemindex="4">
<i class="el-icon-document"></i>
<span slot="title">コース管理</span>
</el-menu-item>
</el-メニュー>
</el-aside>
<!-- メインフレーム -->
<エルコンテナ>
<エルメイン>
<!-- ブレッドクラム -->
<el-breadcrumseparator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>生徒管理</el-breadcrumb-item>
</el-ブレッドクラム>
<!-- フォーム-->
<el-form inline="ture" style="margin-top:20px ;">
<!-- inline が true の場合、フォームが水平に表示されることを意味し、margin-top は上部のブレッドクラムからの距離を指します -->
<!-- レイアウト、全長は 24 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="クエリ条件を入力してください">
<el-input placeholder="クエリ条件を入力してください" style="width:360px;"></el-input>
</el-form-item>
</el-col>
<!-- このボタンのグループを右側に表示します。右側のボタン グループとの間隔は 10px です -->
<el-col :span="8" style="text-align:right;padding-right: 10px;">
<エルボタングループ>
<el-button type="primary" icon="el-icon-search">查询</el-button>
<el-button type="primary" icon="el-icon-tickets">全部</el-button>
<el-button type="primary" icon="el-icon-plus">追加</el-button>
</el-ボタン-グループ>
</el-col>
<el-col :span="2">
<エルアップロード>
<el-button type="primary">导入Excle</el-button>
</el-アップロード>
</el-col>
<el-col :span="2">
<エルアップロード>
<el-button type="primary">导出Excle</el-button>
</el-アップロード>
</el-col>
</el-行>
</el-form>
<!-- テーブル -->
<el-table :data="students" border style="width: 100%" size="mini">
<el-table-column type="selection">
</el-テーブル-カラム>
<el-table-column type="index" label="序号" width="60">
</el-テーブル-カラム>
<el-table-column prop="sno" label="学号" width="80">
</el-テーブル-カラム>
<el-table-column prop="name" label="姓名" width="80">
</el-テーブル-カラム>
<el-table-column prop="gender" label="性别" width="60">
</el-テーブル-カラム>
<el-table-column prop="birthday" label="生日" width="100">
</el-テーブル-カラム>
<el-table-column prop="mobile" label="電话" width="120">
</el-テーブル-カラム>
<el-table-column prop="email" label="邮箱" align="center" width="220">
</el-テーブル-カラム>
<el-table-column prop="address" label="地址" align="center" width="">
</el-テーブル-カラム>
<el-table-column label="操作" width="180">
<el-button type="success" icon="el-icon-check" size="mini" サークル></el-button>
<el-button type="primary" icon="el-icon-edit" size="mini" サークル></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" サークル></el-button>
</el-テーブル-カラム>
</el-テーブル>
<!--ページング-->
<!-- レイアウト -->
<el-row style="margin-top:10px ;">
<el-col :span="8" style="text-align:left">
<el-button type="primary" icon="el-icon-delete">一括削除</el-button>
</el-col>
<el-col :span="16" style="text-align:right">
<エルページネーション
:current-page="currentPage4" :page-sizes="[10, 20, 50, 100]" :page-size="ページサイズ"
レイアウト = "合計、サイズ、前へ、ページャー、次へ、ジャンパー" :total="合計番号">
</el-ページネーション>
</el-col>
</el-行>
</el-main>
<el-footer style="height: 30px;">学生情報管理システム Copyright zhaoyahui 20220811</el-footer>
</el-コンテナ>
</el-コンテナ>
</el-コンテナ>
</div>
</body>
</html>
<!-- vue コードを html ページに配置すると非常に長くてごちゃごちゃになるので、1 つずつ分離して js ファイルに配置できます -->
<!-- 次のコードは、index.js に配置されます -->
<!-- <スクリプト>
// オブジェクトをインスタンス化する
const app= 新しい Vue({
el:'#app',//ID app を持つコンテナに適用されます
データ：{
msg:'こんにちは、Vue',
}
})
</script> -->
<!-- 上記のコードはindex.jsに配置されているため、導入する必要があります -->
<script src="./js/index.js"></script>
2.index.js
const app= new Vue({ el:'#app',// ID を持つコンテナに適用 app data:{ msg:'Hello,Vue', students:[ { sno:95001,name:"Liu Jianhui", 性別:"男性"、誕生日:"1991-02-11"、携帯:"18271953674"、メール:"[email protected]"、住所:"上海" }、{ sno : 95002、名前:"張 三 " 、性別:"男性"、誕生日:"1992-02-11"、携帯:"18271953674"、メール:"[email protected]"、アドレス:"上海" } 、
]、
合計番号:100、
現在のページ4:2、
ページサイズ:10、
}
})
3.index.css
html,body,#app,.el-container{
マージン: 0px;/*マージンは 0*/
パディング: 0px;/*マージンは 0*/
高さ: 100%;
}
.el-ヘッダー {
背景色: #B3C0D1;
カラー: #333;
text-align: left;/*タイトルのフォント位置*/
行の高さ: 80px;/*行の高さ*/
フォントサイズ: 32px;
}
.the-フッター {
背景色: #B3C0D1;
カラー: #333;
テキスト整列: 中央;
行の高さ: 30px;
}
.el-aside {
背景色: #D3DCE6;
カラー: #333;
テキスト整列: 中央;
行の高さ: 200px;
}
.el-main {
背景色: #E9EEF3;
カラー: #333;
/*テキスト配置: 中央;*/
/*行の高さ: 160px;*/
}
ボディ > .el-container {
マージン-ボトム: 40px;
}
.el-container:nth-child(5) .el-aside、
.el-container:nth-child(6) .el-aside {
行の高さ: 260px;
}
.el-container:nth-child(7) .el-aside {
行の高さ: 320px;
}