el data tree
v0.8.0
Используйте axios для автоматической отправки запросов, поддержки фильтрации, настройки столбцов действий и упрощения RESTful CRUD.
中文文档
el-data-tree создан для решения бизнес-задач, поэтому внутри заложена CRUD-логика.
Например, чтобы разработать API user , предположим, что его относительный путь выглядит следующим образом:
/api/v1/usersУспокаивающий API 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 ? | ОузуЮ ? |
Этот проект соответствует спецификации всех участников. Любые вклады приветствуются!
⬆ Вернуться к началу
Массачусетский технологический институт
⬆ Вернуться к началу
