Vue.js에서 SPA - [2] Element UI로 각 창의 화면 만들기

14233 단어 ElementUISPAVue.js
지난번 계속

GUI 부품 찾기



Element UI의 사이트에서 사용할 수있는 것 같은 부분을 찾아 온다. 라인업은 풍부하고 대부분의 요구는 충족시킬 것이다. 이번에는 NavMenuTable

코드



전회와 그다지 바뀌지 않았지만, 이런 느낌.

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 ? 조금 사용법을 읽기로 한다.

시리즈


  • Vue.js에서 SPA - [1] Element UI로 기본 화면 만들기
  • Vue.js에서 SPA - [2] Element UI로 각 창의 화면 만들기
  • Vue.js에서 SPA - [3] vue-router로 라우팅
  • Vue.js에서 SPA - [4] 구성 요소로 시도
  • Vue.js에서 SPA - [5] 재활성화되고 있습니까?
  • Vue.js에서 SPA - [6] 서버에서 데이터 검색
  • Vue.js에서 SPA - [7] Vue에서 서버 데이터 검색
  • Vue.js에서 SPA - [8] 백엔드와 잘 작동하려고 시도한 것
  • Vue.js에서 SPA - [9] 이제 CORS와 그 오류를 피하는 방법
  • Vue.js에서 SPA - [10] Safari .. 너 ... 3rd party 쿠키
  • Vue.js에서 SPA - [11] Element UI로 로그인 화면
  • Vue.js에서 SPA - [12] 로그인 : 단일 창에서 투 창으로 화면 전환
  • Vue.js에서 SPA - [13] 모바일 용 OnsenUI에 손을 넣기
  • Vue.js에서 SPA - [14] Vue.js와 OnsenUI를 사용한 올레올레 쇼핑 카트 튜토리얼
  • Vue.js에서 SPA - [15] 전세계 사람들과 회의 시간을 결정할 때 유용한 사람
  • Vue.js에서 SPA - [16]
  • 좋은 웹페이지 즐겨찾기