element-ui

vue 대표 ui 컴포넌트

 

https://element.eleme.io/#/en-US/component/table#table

Element - The world's most popular Vue UI framework

 

<설치>

npm i element-ui

 

<main.js 등록>

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

 

<el-table>

가이드에 따라 data연결

<template>
  <div>
    <el-table border :data="boardList">
      <el-table-column prop="sabun" label="사번"></el-table-column>
      <el-table-column prop="name" label="이름"></el-table-column>
      <el-table-column prop="id" label="아이디"></el-table-column>
      <el-table-column prop="email" label="이메일"></el-table-column>
    </el-table>
 </div>
</template>

• prop :  가져올 키 이름
• label: 화면에 보여지는 컬럼명 

 

결과화면

<el-button>

버튼

<Dialog>

팝업