Unduh element ui tree table - unduhan kode sumber element ui tree table

element ui tree table

Kategori lainnya

1.0

Unduh

elemen-ui-pohon-tabel

Perluas komponen tabel ElementUI untuk mendukung struktur pohon

Memasang

npm install element-ui-tree-table -S

Penggunaan

Proyek ini bergantung pada Element-UI, Anda harus memperkenalkannya terlebih dahulu

memperkenalkan

 import TreeTableComponent from 'element-ui-tree-table'
import 'element-ui-tree-table/dist/index.css'
Vue . use ( TreeTableComponent , {
    prefix : 'i' // 可选
} )

menggunakan

data uji

< template >
  < div id = " app " >
    < i-tree-table height = " 600px " id-key = " rowKey " :columns = " columns "
      @select = " onSelect "
      @trigger = " onTrigger "
      :data = " data " border >
      < el-table-column label = "负责人" prop = " leader " />
      < el-table-column label = "创建时间" prop = " createTime " />
      < el-table-column label = "经验要求" prop = " expr " >
        < template slot-scope="scope">
          < span v-if = " scope.row.expr " >{{scope.row.expr}}</ span >
          < span v-else >————</ span >
        </ template >
      </ el-table-column >
      < el-table-column label = "发布天数" prop = " date " />
    </ i-tree-table >
    < br />
    < el-button type = " primary " size = " small " @click = " add " >增加一行</ el-button >
  </ div >
</ template >

< script >
import data from ' ./components/data '
import TreeTable from ' ./components/tree-table '
export default {
  name : ' App ' ,
  components : {
    TreeTable
  },
  data () {
    return {
      data,
      columns : [{
        type : ' index ' ,
        align : ' center '
      }, {
        type : ' selection ' ,
        align : ' center '
      }, {
        label : '职位名称' ,
        prop : ' name '
      }],
      id : 1000
    }
  },
  methods : {
    add () {
      this . data . push ({
        rowKey : this . id ++ ,
        name : '新增行' ,
        leader : '管理员' ,
        $expanded : true ,
        createTime : ' 2019-07-24 ' ,
        expr : ' ' ,
        date : ' 1天'
      })
    },
    onSelect ( selection ) {
      console . log (selection)
    },
    onTrigger ( row , expanded ) {
      /**
       * 在这里可以保留折叠状态
       * 也可以设置reserve-expaned属性为true保留状态 但是你不能够设置默认值，设置了默认值的行将不受控，因为* 组件肯定是选择用户传入$expaned属性为准
       * 所以推荐的做法是监听trigger事件
       */
      row . $expanded = expanded
    }
  }
}
</ script >

Item konfigurasi

milik	jenis	menjelaskan	nilai bawaan
data	Himpunan	Sumber data, memerlukan atribut rowKey yang ditentukan secara default untuk mengidentifikasi baris secara unik	-
kunci id	Rangkaian	Indeks unik sumber data	kunci baris
kolom	Himpunan	Konfigurasikan kolom indeks, pilih kolom, dan perluas kolom	-
ikon	Rangkaian	perluas ikon	el-icon-caret-kanan
kelas pemicu	Rangkaian	Perluas kelas tombol	-
diperluas cadangan	Boolean	Apakah akan mempertahankan status diperluas. Disarankan untuk tidak menyetel perluasan default jika properti ini benar. Mempertahankan status diperluas dapat dicapai dengan mendengarkan pemicu.	-
Item konfigurasi tabel asli	-	Lihat dokumentasi elemen-ui	-

item konfigurasi kolom

Melihat:

Elemen pertama yang tipenya bukan indeks dan pilihan akan diperlakukan sebagai tombol perluas untuk menempatkan kolom.
Hanya boleh ada satu kolom yang diperluas, dan kolom tambahan apa pun akan diabaikan.

Perluas konfigurasi kolom

milik	jenis	menjelaskan	Nilai opsional
label	Rangkaian	Judul yang ditampilkan	-
menopang	Rangkaian	Nama bidang yang sesuai dengan konten kolom, Anda juga dapat menggunakan atribut properti	-
meluruskan	Rangkaian	Penyelarasan	kiri/tengah/kanan
lebar	Rangkaian	Lebar kolom yang sesuai	-
tetap	String, Boolean	Apakah kolom tersebut dipasang di kiri atau kanan, true berarti dipasang di kiri
render-header	Fungsi(h, { kolom, $index })	Fungsi yang digunakan untuk rendering area Label judul kolom
nama kelas	Rangkaian	Nama kelas kolom
label-nama-kelas	Rangkaian	Nama kelas khusus untuk tajuk kolom saat ini
tampilkan-overflow-keterangan alat	Boolean	Tampilkan keterangan alat ketika konten terlalu panjang dan tersembunyi
lebar minimum	Rangkaian	Lebar minimum kolom yang bersangkutan. Perbedaan dari lebar adalah lebarnya tetap, dan lebar minimum akan mengalokasikan lebar yang tersisa secara proporsional ke kolom yang lebar minimumnya ditetapkan.
penyelarasan header	Rangkaian	Perataan header. Jika item ini tidak disetel, perataan tabel akan digunakan.	kiri/tengah/kanan
dapat diubah ukurannya	Boolean	Apakah lebar kolom terkait dapat diubah dengan menyeret (atribut perbatasan harus disetel ke true)

Konfigurasi kolom normal

milik	jenis	menjelaskan	Nilai opsional
jenis	Rangkaian	Jenis kolom yang sesuai, jika pilihan disetel, kotak multi-pilih akan ditampilkan; jika indeks disetel, indeks baris akan ditampilkan.	seleksi/indeks
label	Rangkaian	Judul yang ditampilkan	-
menopang	Rangkaian	Nama bidang yang sesuai dengan konten kolom, Anda juga dapat menggunakan atribut properti	-
meluruskan	Rangkaian	Penyelarasan	kiri/tengah/kanan
lebar	Rangkaian	Lebar kolom yang sesuai	-
tetap	String, Boolean	Apakah kolom tersebut dipasang di kiri atau kanan, true berarti dipasang di kiri
render-header	Fungsi(h, { kolom, $index })	Fungsi yang digunakan untuk rendering area Label judul kolom
nama kelas	Rangkaian	Nama kelas kolom
label-nama-kelas	Rangkaian	Nama kelas khusus untuk tajuk kolom saat ini
dapat dipilih	Fungsi (baris, indeks)	Ini hanya berlaku untuk kolom dengan tipe = pilihan. Tipenya adalah Fungsi. Nilai kembalian Fungsi digunakan untuk menentukan apakah Kotak Centang pada baris ini dapat dicentang.
tampilkan-overflow-keterangan alat	Boolean	Tampilkan keterangan alat ketika konten terlalu panjang dan tersembunyi
lebar minimum	Rangkaian	Lebar minimum kolom yang bersangkutan. Perbedaan dari lebar adalah lebarnya tetap, dan lebar minimum akan mengalokasikan lebar yang tersisa secara proporsional ke kolom yang lebar minimumnya ditetapkan.
penyelarasan header	Rangkaian	Perataan header. Jika item ini tidak disetel, perataan tabel akan digunakan.	kiri/tengah/kanan
dapat diubah ukurannya	Boolean	Apakah lebar kolom terkait dapat diubah dengan menyeret (atribut perbatasan harus disetel ke true)