vue 대표 ui 컴포넌트
https://element.eleme.io/#/en-US/component/table#table
Element - The world's most popular Vue UI framework
element.eleme.io
<설치>
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>
팝업
'vue.js' 카테고리의 다른 글
img 태그 바인딩 (0) | 2023.05.18 |
---|---|
[vue3] ref, reactive (0) | 2023.05.18 |
CORS 에러 (vue.js, springboot) / proxy (0) | 2023.04.25 |
webpack-dev-server (0) | 2023.04.24 |
webpack, vue-loader, vue-style-loader (0) | 2023.04.24 |