el data tree
v0.8.0
ใช้ axios เพื่อส่งคำขอโดยอัตโนมัติ รองรับการกรอง ปรับแต่งคอลัมน์การดำเนินการ และทำให้ RESTful CRUD ง่ายขึ้น ?
中文档
el-data-tree ถูกสร้างขึ้นเพื่อแก้ไขปัญหาทางธุรกิจ ดังนั้นตรรกะ CRUD จึงถูกตั้งค่าไว้ภายใน
ตัวอย่างเช่น หากต้องการพัฒนา API user ให้สมมติเส้นทางสัมพัทธ์ดังนี้:
/api/v1/usersCRUD 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 >ผลลัพธ์มีดังนี้:
⬆ กลับไปด้านบน
⬆ กลับไปด้านบน
⬆ กลับไปด้านบน
peerDependencies คอมโพเนนต์นี้ใน element-ui และ @femessage/el-form-renderer และ axios
ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งในโครงการของคุณแล้ว
yarn add element-ui @femessage/el-form-renderer axios⬆ กลับไปด้านบน
ส่งเสริมให้ใช้เส้นด้ายในการติดตั้ง
yarn add @femessage/el-data-tree⬆ กลับไปด้านบน
นี่เป็นเหตุผลในการย่อขนาด: ด้วยวิธีนี้การสร้างแอป webpack หรือ Bundler อื่น ๆ ของคุณเพียงแค่รวมการพึ่งพาเป็นผู้จำหน่ายรายเดียวสำหรับทุกเพจที่ใช้ส่วนประกอบนี้ แทนที่จะเป็นผู้จำหน่ายรายเดียวสำหรับหนึ่งเพจ
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 - | อูซูยู - |
โครงการนี้เป็นไปตามข้อกำหนดของผู้มีส่วนร่วมทั้งหมด ยินดีต้อนรับการบริจาคใด ๆ !
⬆ กลับไปด้านบน
เอ็มไอที
⬆ กลับไปด้านบน
