el data tree
v0.8.0
استخدم axios لإرسال الطلبات تلقائيًا، ودعم التصفية، وتخصيص أعمدة الإجراءات، وجعل RESTful CRUD أكثر بساطة؟
中文文档
تم إنشاء شجرة البيانات el-data-tree لحل مشاكل العمل، لذلك تم ضبط منطق CRUD بداخلها.
على سبيل المثال، لتطوير واجهة برمجة تطبيقات user ، لنفترض أن مسارها النسبي هو كما يلي:
/api/v1/usersيجب أن تكون واجهة برمجة تطبيقات CRUD المريحة:
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 >⬆ العودة إلى الأعلى
ألفين | ضريبة ؟ ؟ | الحجر البارد | ايفيلت ؟ | دونالد شين ؟ | ColMugX ؟ | أوزويو ؟ |
يتبع هذا المشروع مواصفات جميع المساهمين. المساهمات من أي نوع موضع ترحيب!
⬆ العودة إلى الأعلى
معهد ماساتشوستس للتكنولوجيا
⬆ العودة إلى الأعلى
