el data table
v1.23.2
axios 에 의한 자동 요청, 페이지 매김, 트리 데이터 구조, 사용자 정의 검색, 사용자 정의 작업 열을 지원하여 나머지 API를 쉽게 만들 수 있습니까?
테이블은 @femessage/el-form-renderer를 사용하여 양식을 렌더링합니다.
중국어(중국어)
el-data-table은 비즈니스 문제를 해결하기 위해 생성되었으므로 내부에 CRUD 로직이 설정됩니다.
예를 들어 user API를 개발하려면 다음과 같은 상대 경로를 가정합니다.
/ api / v1 / users편안한 CRUD API는 다음과 같아야 합니다.
GET / api / v1 / users ? page = 1 & size = 10기본 데이터 구조
{
"code" : 0 ,
"msg" : "ok" ,
"payload" : {
"content" : [ ] , // dataPath
"totalElements" : 2 , // totalPath
}
}dataPath/totalPath를 사용자 정의할 수 있습니다.
hasPagination=false 인 경우 기본 dataPath는 payload 입니다.
POST / api / v1 / users PUT / api / v1 / users / : id DELETE / api / v1 / users / : id그런 다음 CRUD 기능을 완료하려면 다음 코드만 사용해야 합니다.
< template >
< el-data-table v-bind =" tableConfig " > </ el-data-table >
</ template > < script >
export default {
data ( ) {
return {
tableConfig : {
url : '/example/users' ,
columns : [
{
prop : 'name' ,
label : '用户名'
}
] ,
searchForm : [
{
type : 'input' ,
id : 'name' ,
label : '用户名' ,
el : {
placeholder : '请输入'
}
}
] ,
form : [
{
type : 'input' ,
id : 'name' ,
label : '用户名' ,
el : {
placeholder : '请输入'
} ,
rules : [
{
required : true ,
message : '请输入用户名' ,
trigger : 'blur'
}
]
}
]
}
}
}
}
</ script >결과는 다음과 같습니다.
검색하다
만들다
업데이트
삭제
⬆맨 위로 돌아가기
템플릿의 내용을 스크립트로 이동한다는 것은 템플릿을 줄일 수 있고 js를 다른 파일로 추출하여 재사용할 수 있다는 것을 의미합니다. 동시에 js의 데이터는 실제로 json의 일부이므로 코드 생성 도구가 도움이 될 수 있습니다.
⬆맨 위로 돌아가기
Element-ui의 el-table을 기반으로 el-data-table을 생성하는 이유는 무엇입니까?
나는 종종 다음과 같은 소리를 듣습니다.
우선 el-table은 정말 유연하지만 페이징 요청을 구현할 때 el-table만으로는 충분하지 않으며 el-pagination 구성 요소를 결합해야 합니다. 페이징 처리 내용의 대부분이 반복됩니다. 높은 수준의 비즈니스 구성 요소가 없으면 어디에서나 중복 코드가 발생합니다.
실제로 관리자나 대시보드 웹앱에는 Restful API를 이용한 CRUD 작업이 많이 있습니다. CRUD 기능을 완료하는 구성 요소를 만드는 데 하나의 URL만 사용할 수 있습니다.
둘째, 경험 많은 개발자들은 구성 요소가 유연할수록 더 좋다고 생각합니다.
그러나 경험이 부족한 "뉴비"의 경우 일반적인 비즈니스 시나리오에 익숙하지 않습니다. 양식 유효성 검사, 공간 필터링, 로딩 추가, 예외 처리와 같은 일부 기본 작업을 잊어버리면 버그가 발생할 수 있습니다.
일선 비즈니스 개발자의 경우 끝없는 개발 작업에 직면하여 실제로 반복되는 비즈니스 로직을 처리하고 싶지 않습니다. 그들은 단지 손을 자유롭게 하고 일찍 퇴근하고 싶어할 뿐입니다.
그런 상황에서 el-data-table이 탄생했습니다.
⬆맨 위로 돌아가기
⬆맨 위로 돌아가기
⬆ 맨 위로 돌아가기
Yarn을 사용하여 설치하도록 권장
yarn add @femessage/el-data-table⬆맨 위로 돌아가기
이는 축소 이유입니다. 이 방법으로 앱, 웹팩 또는 기타 번들러를 빌드하면 한 페이지에 하나의 공급업체가 아닌 이 구성 요소를 사용하는 모든 페이지에 대해 종속성을 하나의 공급업체에 번들링하기만 하면 됩니다.
import Vue from 'vue'
// register component and loading directive
import ElDataTable from '@femessage/el-data-table'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
Button ,
Dialog ,
Form ,
FormItem ,
Loading ,
Pagination ,
Table ,
TableColumn ,
Message ,
MessageBox
} from 'element-ui'
Vue . use ( Button )
Vue . use ( Dialog )
Vue . use ( Form )
Vue . use ( FormItem )
Vue . use ( Loading . directive )
Vue . use ( Pagination )
Vue . use ( Table )
Vue . use ( TableColumn )
Vue . component ( 'el-form-renderer' , ElFormRenderer )
Vue . component ( 'el-data-table' , ElDataTable )
// to show confirm before delete
Vue . prototype . $confirm = MessageBox . confirm
// show tips
Vue . prototype . $message = Message
// if the table component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue . prototype . $axios = axios< template >
< el-data-table ></ el-data-table >
</ template >⬆맨 위로 돌아가기
⬆맨 위로 돌아가기
이 프로젝트에 기여하는 데 관심이 있는 분들은 다음과 같습니다.
기여 가이드를 참조하세요.
⬆ 맨 위로 돌아가기
멋진 분들에게 감사드립니다(이모지 키):
부과 ? ? ? | 도널드 셴 | 미피쿠퍼 | 첸 환펑 | 이블트 ? | 앨빈 ? | 한 ? |
쿤즈지아 ? | 에드가 ? | 바레템 | 정말이야. | 루준웨이 | CJF ? | 잭 레인보우 ? |
콜머그X | 눈에 잠긴 | 스펀지 ? | 4방주 | 흐통빙 | PPP니 | 팝업대화상자 ? |
조깅터 | 욜로핏 ? | 화자일리 ? |
이 프로젝트는 모든 기여자 사양을 따릅니다. 어떤 종류의 기여도 환영합니다!
MIT
⬆맨 위로 돌아가기
