Vue.js에서 SPA - [2] Element UI로 각 창의 화면 만들기
GUI 부품 찾기
Element UI의 사이트에서 사용할 수있는 것 같은 부분을 찾아 온다. 라인업은 풍부하고 대부분의 요구는 충족시킬 것이다. 이번에는
NavMenu
와 Table
코드
전회와 그다지 바뀌지 않았지만, 이런 느낌.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.1/locale/en.js"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="app">
<el-container>
<el-header height="100px"><img src="static/img/placeholder-logo-2-300x167.png" height="100" align="left"></el-header>
<el-container>
<el-aside width="200px">
<el-col :span="24">
<el-menu default-active="1" class="el-menu-vertical-demo">
<el-menu-item index="1">
<i class="el-icon-location"></i>
<span>Location</span>
</el-menu-item>
<el-menu-item index="2" disabled>
<i class="el-icon-document"></i>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-col>
</el-aside>
<el-main>
<el-table :data="location" style="width: 100%">
<el-table-column prop="id" label="id" width="100"></el-table-column>
<el-table-column prop="name" label="name"></el-table-column>
<el-table-column prop="country" label="country" width="180"></el-table-column>
<el-table-column prop="metro" label="metro" width="180"></el-table-column>
<el-table-column prop="market" label="market" width="180"></el-table-column>
<el-table-column prop="status" label="status" width="180"></el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
</body>
<script>
ELEMENT.locale(ELEMENT.lang.en)
var vm = new Vue({
el: '#app',
data: function() {
return {
location: [{id: 1, name: 'Site1', country: 'USA', metro: 'San Jose', market: 'US', status: 'Active'},
{id: 2, name: 'Site2', country: 'USA', metro: 'San Mateo', market: 'US', status: 'Active'},
{id: 3, name: 'Site3', country: 'USA', metro: 'San Rafael', market: 'US', status: 'Active'}]
}
}
})
각 창에 컴포넌트 그대로 넣은 것과
data: ()
로 데이터 넣는 것만이므로 별로 쓰지 않는다.스크린샷
왼쪽으로 네비게이션으로 오른쪽으로 컨텐츠 (테이블). 간단하지만 다소 어플처럼 보였다?
다음 번
다음 번에는 내비게이션을 눌렀을 때 오른쪽 화면 전환이 될 것입니다.
vue-router
? 조금 사용법을 읽기로 한다.시리즈
Reference
이 문제에 관하여(Vue.js에서 SPA - [2] Element UI로 각 창의 화면 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/narutaro/items/9abbf7881f692c985484텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)