el data tree

el-data-tree

Gunakan axios untuk mengirim permintaan secara otomatis, mendukung pemfilteran, menyesuaikan kolom tindakan, dan membuat RESTful CRUD lebih sederhana?

中文文档

Daftar isi

• Perkenalan
  • MENTAH
• Fitur
• Demo
• Pra Instal
• Memasang
• Mulai Cepat
  • Komponen Daftar Global
  • Templat
• Kontributor
• Lisensi

Perkenalan

MENTAH

el-data-tree dibuat untuk menyelesaikan masalah bisnis, sehingga logika CRUD diatur di dalamnya.
Misalnya, untuk mengembangkan api user , misalkan jalur relatifnya seperti ini:

/api/v1/users

Api CRUD yang tenang seharusnya:

• Mengambil

 GET / api / v1 / users ? type = 1

• Membuat

 POST / api / v1 / users

• Memperbarui

 PUT / api / v1 / users / : id

• Menghapus

 DELETE / api / v1 / users / : id

Maka hanya perlu menggunakan kode berikut untuk menyelesaikan fungsi 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 >

Hasilnya adalah sebagai berikut：

• Mengambil

• Membuat

• Memperbarui

• Menghapus

⬆ Kembali ke Atas

Fitur

• Gunakan konfigurasi untuk memanggil restful api untuk menyelesaikan fungsi CRUD
• Mendukung bilah menu khusus, serta fungsi tindakan khusus
• Simpan expandKeys secara default dan tidak akan kehilangan status expandKeys setelah memanggil api buat/hapus/perbarui
• Metode pemeriksaan node yang dioptimalkan

⬆ Kembali ke Atas

Demo

• dokumen dan demo online

⬆ Kembali ke Atas

Pra Instal

Komponen ini peerDependencies pada elemen-ui dan @femessage/el-form-renderer dan axios
pastikan Anda telah menginstalnya di proyek Anda

yarn add element-ui @femessage/el-form-renderer axios

⬆ Kembali ke Atas

Memasang

Anjurkan menggunakan benang untuk pemasangan

yarn add @femessage/el-data-tree

⬆ Kembali ke Atas

Mulai Cepat

Komponen Daftar Global

Ini karena alasan minifikasi: dengan cara ini, buat aplikasi, webpack, atau bundler lainnya, cukup gabungkan dependensi ke dalam satu vendor untuk semua halaman yang menggunakan komponen ini, bukan satu vendor untuk satu halaman

 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

⬆ Kembali ke Atas

Templat

< template >
  < el-data-tree ></ el-data-tree >
</ template >

⬆ Kembali ke Atas

Kontributor

Alvin

memungut ? ?

Batu Dingin

JAHAT ?

Donald Shen ?

ColMugX ?

OuZuYu ?

Proyek ini mengikuti spesifikasi semua kontributor. Kontribusi apa pun diterima!

⬆ Kembali ke Atas

Lisensi

MIT

⬆ Kembali ke Atas