el data tree
v0.8.0
axios 사용하여 자동으로 요청 보내기, 필터링 지원, 작업 열 사용자 정의 및 RESTful CRUD를 더 간단하게 만드시겠습니까?
중국어(중국어)
el-data-tree는 비즈니스 문제를 해결하기 위해 생성되었으므로 내부에 CRUD 로직이 설정됩니다.
예를 들어 user API를 개발하려면 다음과 같은 상대 경로를 가정합니다.
/api/v1/users편안한 CRUD API는 다음과 같아야 합니다.
GET / api / v1 / users ? type = 1 POST / api / v1 / users PUT / api / v1 / users / : id DELETE / api / v1 / users / : id그런 다음 CRUD 기능을 완료하려면 다음 코드만 사용해야 합니다.
< template >
< el-data-tree v-bind =" treeConfig " > </ el-data-tree >
</ template > < script >
export default {
data ( ) {
return {
treeConfig : {
url : '/example/users' ,
dataPath : 'data.payload' ,
showFilter : true ,
form : [
{
$type : 'input' ,
$id : 'name' ,
label : '用户名' ,
$el : {
placeholder : '请输入'
} ,
rules : [
{
required : true ,
message : '请输入用户名' ,
trigger : 'blur'
}
]
}
]
}
}
}
}
</ script >결과는 다음과 같습니다:
⬆ 맨 위로 돌아가기
⬆ 맨 위로 돌아가기
⬆ 맨 위로 돌아가기
이 구성 요소는 element-ui 및 @femessage/el-form-renderer 및 axios에 대한 피어 종속성입니다.
프로젝트에 설치했는지 확인하세요
yarn add element-ui @femessage/el-form-renderer axios⬆ 맨 위로 돌아가기
실을 사용하여 설치하도록 권장
yarn add @femessage/el-data-tree⬆ 맨 위로 돌아가기
이는 축소 이유입니다. 이 방법으로 앱, 웹팩 또는 기타 번들러를 빌드하면 한 페이지에 대해 하나의 공급업체가 아닌 이 구성 요소를 사용하는 모든 페이지에 대해 하나의 공급업체에 종속성을 묶을 수 있습니다.
import Vue from 'vue'
// register component and loading directive
import ElDataTree from '@femessage/el-data-tree'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
Button ,
Dialog ,
Dropdown ,
DropdownMenu ,
DropdownItem ,
Form ,
FormItem ,
Input ,
Loading ,
Tree ,
MessageBox ,
Message
} from 'element-ui'
Vue . use ( Button )
Vue . use ( Dialog )
Vue . use ( Dropdown )
Vue . use ( DropdownMenu )
Vue . use ( DropdownItem )
Vue . use ( Form )
Vue . use ( FormItem )
Vue . use ( Input )
Vue . use ( Loading . directive )
Vue . use ( Tree )
Vue . component ( 'el-form-renderer' , ElFormRenderer )
Vue . component ( 'el-data-tree' , ElDataTree )
// to show confirm before delete
Vue . prototype . $confirm = MessageBox . confirm
// if the tree component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue . prototype . $axios = axios⬆ 맨 위로 돌아가기
< template >
< el-data-tree ></ el-data-tree >
</ template >⬆ 맨 위로 돌아가기
앨빈 | 부과 ? ? | 콜드스톤 | 이블트 ? | 도널드 셴 ? | 콜머그X ? | 오우즈유 ? |
이 프로젝트는 모든 기여자 사양을 따릅니다. 어떤 종류의 기여도 환영합니다!
⬆ 맨 위로 돌아가기
MIT
⬆ 맨 위로 돌아가기
