vue element crud
1.0.0
안타깝게도 이 저장소는 더 이상 유지 관리되지 않습니다. 사용에 따른 책임은 사용자 본인에게 있습니다.
참고: 본 프로젝트는 컴포넌트 구현에 일부 문제가 있을 수 있으며, 시간이 지남에 따라 Vue 프레임워크 및 요소 UI 라이브러리의 버전도 업데이트될 수 있어 현재와 미래에 적합하지 않을 수 있습니다.
유명한 vue UI 구성 요소인 element-ui를 기반으로 하는 래핑된 vue CRUD 구성 요소입니다.
element-ui컴포넌트를 기반으로 컴포넌트를 추가, 삭제, 수정, 확인합니다.
다음은 간단한 데모입니다.
프로젝트의 예제와 소스 코드 파일 Crud.vue를 읽어 보면 구성 요소의 구체적인 사용법을 이해하는 데 도움이 됩니다.
원하는 경우 이 저장소를 다운로드하거나 복제할 수 있습니다. 그런 다음 npm 스크립트를 실행할 수 있습니다.
$ npm install
$ npm run dev새 터미널을 열고,
$ npm run build:watchvue-element-crud를 vue 플러그인 또는 vue 구성 요소로 사용할 수 있습니다.
이를 구성 요소로 처리하려면 CRUD를 구성 요소로 가져올 수 있습니다.
import { CRUD } from 'vue-element-crud'
export default {
components : { 'crud' : CRUD }
}그렇지 않으면 플러그인으로 처리할 수 있습니다.
vue-loader, babel-loader 또는 css-loader가 element-ui에 필요하므로 계속하려면 vue 프로젝트를 초기화하거나 기존 프로젝트를 가져와야 할 수도 있습니다.
$ vue init webpack < project-name > 이 구성 요소는 element-ui에 종속되어 있으며 vue-element-crud 설치 시 element-ui 자동으로 설치되므로 별도로 element-ui 설치할 필요가 없습니다.
$ npm install -S vue-element-crudmain.js에 아래 줄을 추가하세요.
import 'element-ui/lib/theme-default/index.css'
import ElementUI from 'element-ui'
import CRUD from 'vue-element-crud'
Vue . use ( ElementUI )
Vue . use ( CRUD ) 이 vue-element-crud의 소품과 메서드를 구현하는 방법을 알아보려면 문서나 예제를 읽어보세요.
| 소품 | 유형 | 필수의 | 기본 | 설명 |
|---|---|---|---|---|
| 데이터 | 정렬 | 진실 | --- | 테이블 데이터 배열 |
| 형태 | 물체 | 진실 | --- | 양식 항목 변수를 저장하는 양식 객체 |
| 전지 | 물체 | 진실 | --- | 양식 항목 구조를 설명하는 개체입니다. 예 { name: { label: 'name', length: 20, type: String, options: [{ label: 'Mike', value: 'Mike' }] } |
| 규칙 | 물체 | 거짓 | --- | 양식 항목 규칙을 설명하는 개체입니다. 예 { name: [{ required: true, message: 'name is required.' }] } |
| 크기 | 끈 | 거짓 | 'large' | 대화상자 크기를 'full' 또는 'large' 또는 small 또는 생략합니다. |
| 라벨 폭 | 끈 | 거짓 | '100px' | 양식 및 테이블의 라벨 너비입니다. |
| 인라인 | 부울 | 거짓 | false | 양식 항목이 인라인으로 표시되는지 여부를 결정합니다. |
| 테이블 | 물체 | 거짓 | --- | 테이블 구조가 양식 구조를 따르지 않는 경우에는 이를 지정할 수 있습니다. 예: { name: 'name' } |
| 행위 | 정렬 | 거짓 | ['create', 'destroy', 'update'] | 잔인한 행동. |
| 로드 중 | 부울 | 거짓 | false | CRUD가 XHR 상태에 있으면 제출 버튼이 비활성화됩니다. |
| 하이라이트현재행 | 부울 | 거짓 | false | 테이블의 현재 행을 강조 표시합니다. |
| 행스타일 | 기능 | 거짓 | --- | 테이블 행 스타일 Function(row, index) |
| 이벤트 | 설명 |
|---|---|
| 열려 있는 | 대화 상자 열기 이벤트. 대화 상자를 표시하려면 editing true로 설정하세요. |
| 닫다 | 대화 상자 닫기 이벤트. 대화 상자를 닫으려면 editing false로 설정하세요. |
| 만들다 | 양식 생성 이벤트를 form 에 양식 모델을 할당해야 합니다. |
| 업데이트 | 양식 업데이트 이벤트 (row, index) 가 처리기에 전달됩니다. form 에 행을 할당해야 합니다. |
| 파괴하다 | 테이블 행 소멸 이벤트 (row, index) 가 핸들러에 전달됩니다. |
| 제출하다 | 양식 제출 이벤트 (status, closeDialog) 가 핸들러에 전달됩니다. 0 생성을 나타내고 1 closeDialog 를 나타냅니다. |
| 확장하다 | 테이블 확장 이벤트 (row, expanded) 가 핸들러에 전달됩니다. element-ui 테이블 이벤트를 참조하세요. |
| 행 클릭 | 테이블 행 클릭 이벤트 (row, event, column) 가 핸들러에 전달됩니다. 요소 UI 테이블 이벤트를 참조하세요. |
| 행-dblclick | 테이블 행 dblclick 이벤트 (row, event) 가 핸들러에 전달됩니다. element-ui 테이블 이벤트를 참조하세요. |
| 슬롯 | 설명 |
|---|---|
| 색인 | 테이블 행 인덱스 슬롯. element-ui 테이블 슬롯을 참조하세요. |
| 확장하다 | 테이블 확장 슬롯. element-ui 테이블 슬롯을 참조하세요. |
| 앞에 추가 | 테이블 앞에 슬롯을 추가합니다. |
| 기본 | 테이블 추가 슬롯. |
| 애드온 | 애드온 슬롯을 형성하세요. |
템플릿은 다음과 같습니다.
<crud :data="data" :form="form" :rules="rules" :fields="fields" inline index
:editing="editing" @open="handleOpen" @close="handleClose"
@create="handleCreate" @update="handleUpdate" @destroy="handleDestroy" @submit="handleSubmit"/>
다음은 부트스트랩하는 데 도움이 될 수 있는 간단한 믹스인입니다. Simple 가져오세요.
import { Simple } from 'vue-element-crud'
export {
mixins : [ Simple ]
} 이 구성 요소에 대한 아이디어가 있으면 주저하지 말고 새로운 이슈를 만들어 더 나은 결과를 얻을 수 있도록 알려주세요.
