wl vue select Unduh - wl vue select Unduh kode sumber

wl vue select

Kategori lainnya

1.0.0

Unduh

wl-vue-pilih, wl-pohon-pilih

Perkenalan

Kotak drop-down pohon dan kotak drop-down biasa dengan semua pilihan untuk kerangka vue.
Kotak drop-down pohon untuk kerangka vue dan kotak drop-down biasa dengan pilih semua.
Komponen ini menyediakan fungsi kotak drop-down pilih semua dan kotak drop-down pohon.
wlVueSelect adalah kotak drop-down sekunder yang dienkapsulasi berdasarkan komponen el-select elementUi, yang menyediakan fungsi semua pilihan dan fungsi pemilihan default;
wlTreeSelect adalah kotak drop-down enkapsulasi sekunder berdasarkan komponen el-tree elementUi, yang menyediakan dukungan data pohon dan fungsi pemilihan default;
Karena kedua kebutuhan ini sangat umum, keduanya dirilis sebagai plug-in terpisah.
el-pilih

Akses daring

Catatan rilis utama

0.4.8 Memperbaiki masalah dimana node induk tidak dapat dibatalkan ketika semua node anak dipilih di kotak drop-down pohon.

Mulailah dengan cepat

npm i wl-vue-select --save

atau

npm i wl-vue-select -S

menggunakan

 import wl from "wl-vue-select";`
import "wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);

    <wlVueSelect
      v-model="value"
      :props="props"
      :data="data"
      multiple
      default-select
    ></wlVueSelect>
    <p>----------分割线------------</p>
    <wlTreeSelect
      leaf
      width="240"
      checkbox
      :data="treeData"
      @change="hindleChanged"
      v-model="selected"
    ></wlTreeSelect>

 data() {
    return {
      value: [], // 选中值
      data: [
        {
          id: 1,
          name: "海边"
        },
        {
          id: 2,
          name: "森林"
        },
        {
          id: 3,
          name: "草原"
        },
        {
          id: 4,
          name: "古城"
        }
      ], // 数据
      props: {
        label: "name",
        value: "id"
      }, // 配置
      treeData: [
        {
          id: "love",
          name: "所有和你走过的风光",
          children: [
            {
              id: 1,
              name: "海边",
              children: [
                {
                  id: 5,
                  name: "蓬莱",
                }
              ]
            },
            {
              id: 2,
              name: "森林"
            },
            {
              id: 3,
              name: "草原"
            },
            {
              id: 4,
              name: "古城"
            }
          ]
        }
      ],
      selected: [ "1" ]// 树下拉框选中数据
    };
  },
  methods: {
    hindleChanged(val){
      console.log(val,2)
      console.log(this.selected)
    }
  },

dokumen

nomor seri	parameter	menjelaskan	jenis	Nilai opsional	nilai bawaan
1	data	pilihan data daftar opsional	Himpunan	-	-
2	alat peraga	Item konfigurasi: bidang label yang menampilkan nama dan bidang nilai yang mengikat nilai	Obyek	-	{ label: "label", nilai: "nilai" }
3	tampilkanTotal	Tampilkan opsi`全选`ketika ada lebih dari beberapa opsi yang tersedia	Nomor	-	1
4	defaultPilih[usang]	Apakah akan mengaktifkan pilihan default, jika`全部`diaktifkan, semua akan dipilih, jika tidak semua, yang pertama akan dipilih. (Harap jangan memberikan nilai awal ke v-model saat mengaktifkan fungsi ini)	Boolean	-	PALSU
5	lainnya	Parameter lain disediakan oleh el-select	-	-	-
6	nodeKey	Saat menggunakan kotak drop-down pohon, Anda harus menggunakan kunci untuk mengurai data	Rangkaian	-	PENGENAL
7	dipilih[usang]	Saat menggunakan kotak drop-down pohon, ikat data yang dipilih [sekarang diubah menjadi v-model]	String-Nomor-Array-Objek	-	-
8	kotak centang	Saat menggunakan kotak drop-down pohon, apakah akan mengaktifkan multi-pilihan	Boolean	-	PALSU
9	lebar	Lebar saat menggunakan kotak drop-down pohon, satuan defaultnya adalah px	Nomor String	-	240
10	daun	Dalam kotak drop-down pohon, apakah hanya node daun yang dapat dipilih	Boolean	-	PALSU
11	pemicu	Ketika kotak drop-down pohon digunakan, metode pemicunya	Rangkaian	klik/fokus/arahkan kursor/manual	klik
12	v-model	Nilai pengikatan kotak drop-down normal dan pohon digunakan sama dengan elemen formulir biasa.	String-Nomor-Array-Objek	-	-
13	dengan disabilitas	Apakah akan menonaktifkan kotak drop-down	Boolean	-	PALSU
14	sekarangrap	Apakah akan melarang beberapa baris untuk ditampilkan. Jika benar, hanya satu baris yang akan ditampilkan.	Boolean	-	PALSU
15	tidak DiperiksaTutup	Ketika beberapa pilihan dibuat, apakah akan menutup area opsi secara otomatis ketika semua tidak dipilih	Boolean	-	PALSU
16	ukuran	Ukuran, penggunaannya sama dengan elementui	Rangkaian	-	sedang
17	defaultPerluasSemua	Dalam bentuk pohon, apakah akan memperluas semua opsi secara default	Boolean	-	BENAR
18	defaultExpandedKeys	Dalam bentuk pohon, kunci simpul diperluas secara default.	Himpunan	-	-
19	dapat disaring	Apakah akan mengaktifkan fungsi pencarian (saat menambahkan kotak drop-down pohon, fungsinya sama dengan kotak drop-down biasa)	Boolean	-	PALSU
20	filterFnc	Dalam bentuk pohon, Anda dapat menyesuaikan logika pencarian secara opsional. Jika tidak lolos, pencarian akan didasarkan pada bidang yang sesuai dengan label di alat peraga. fungsi (nilai, data)	Fungsi	-	-
dua puluh satu	periksa dengan ketat	Dalam bentuk pohon, orang tua dan anak tidak berhubungan	Boolean	-	PALSU
dua puluh dua	perluasOnClickNode	Dalam bentuk pohon, mengklik sebuah node dapat memperbesar atau memperkecilnya	Boolean	-	PALSU
dua puluh tiga	periksaOnClickNode	Apakah akan memilih node saat mengklik node, nilai defaultnya salah, yaitu node hanya akan dipilih ketika kotak centang diklik	Boolean	-	PALSU

Metode

nomor seri	nama	menjelaskan	parameter
1	tutupOpsi	Tutup area opsi pada kotak drop-down pohon	-

catatan versi

0.5.8 Menambahkan konfigurasi independen orangtua-anak di kotak drop-down pohon

0.5.5 Memperbaiki kesalahan logika pemilihan otomatis ketika nilai pengikatan awal kotak drop-down pohon adalah array sederhana; memperbaiki gaya pemusatan vertikal;

0.5.4 Memperbaiki masalah ketika semua data pertama kali dipilih, setiap item terdaftar di area tampilan alih-alih menampilkan 'semua'; fungsi pengenalan skrip ditambahkan.

0.5.3 Sesuaikan nama komponen menjadi punuk besar; tambahkan pengenalan sesuai permintaan

0.5.2 Optimalkan kotak drop-down pohon dan tambahkan fungsi pencarian dan pencarian khusus

0.5.1 Optimalkan kotak drop-down pohon, dan opsi menampilkan efek berlebihan

0.5.0 Menambahkan kotak drop-down pohon defaultExpandAll, bidang defaultExpandedKeys

0.4.9 Tambahkan metode closeOptions untuk menutup area opsi pada kotak drop-down pohon

0.4.8 Memperbaiki masalah dimana node induk tidak dapat dibatalkan ketika semua node anak dipilih di kotak drop-down pohon.

0.4.7 Optimalkan kotak drop-down pohon dan dukung tag ciutkan dari el-select

0.4.6 Optimalkan kotak drop-down pohon dan jadikan atribut ukuran efektif

0.4.5 Optimalkan placeholder kotak drop-down pohon dan tambahkan manajemen parameter untuk menutup opsi ketika semua tidak dipilih.

0.4.2 Optimalkan kotak drop-down pohon dan tambahkan apakah akan melarang beberapa baris bidang.

0.4.1 Optimalkan kotak drop-down pohon dan tambahkan kolom yang dinonaktifkan

0.3.9 Optimalkan kotak drop-down pohon untuk mengekstrak id secara default ketika data yang dipilih yang diteruskan adalah array yang kompleks;

0.3.8 Memperbaiki masalah ketika kotak drop-down pohon dipilih banyak, hanya area tampilan yang dihapus tetapi kotak centang pohon tidak dihapus ketika data kosong.

0.3.7 Ubah apakah akan memilih node anak saja sesuai dengan bidang daun saat memilih kotak drop-down pohon.

0.3.5 Memperbaiki cacat pilihan default pada pemilihan radio kotak drop-down pohon [bila nilai terikatnya adalah array]

0.3.4 Memperbaiki masalah bidang pilihan default pada kotak drop-down pohon el-tree kosong, dan metode getNodes juga dapat memperoleh nilai terakhir. Contoh rademe yang diperbarui

0.3.3 Memperbaiki masalah loop tak terbatas ketika beberapa pilihan diaktifkan di kotak drop-down pohon, dan mengoptimalkan bidang leaf untuk menentukan apakah akan mengembalikan hanya node daun ketika beberapa pilihan diaktifkan.

0.3.2 Optimalkan masalah yang tidak ditampilkan oleh kotak drop-down pohon ketika diperluas secara horizontal

0.3.0 Optimalkan kotak drop-down pohon dan tambahkan bidang mode tampilan pemicu

0.2.7 Saat mengoptimalkan pilihan tunggal pada kotak tarik-turun pohon, level opsional ditambahkan, dan parameter leaf ditambahkan untuk mengatur apakah hanya simpul daun yang dapat dipilih. Saat pemilihan tunggal pohon dioptimalkan, sorotan efek ketika jenis objek dipilih secara default

0.2.5 Optimalkan algoritma pemfilteran kotak drop-down pohon, optimalkan kotak drop-down pohon untuk meningkatkan efek pengguliran ketika opsi yang tersedia terlalu panjang