vue free table

tabel bebas vue

Berdasarkan enkapsulasi sekunder tabel elemen ui, ini mendukung hampir semua fungsi tabel asli

Penggunaan dokumen

Pratinjau DEMO

ciri

• Enkapsulasi sekunder berdasarkan tabel elemen-ui untuk mengurangi jumlah kode
• Mewarisi parameter dan peristiwa komponen tabel elemen-ui
• Mendukung rendering render
• Slot dukungan
• Pengenalan komponen pendukung
• Mendukung data pohon
• Mendukung fungsi paging

dokumen

milik	menjelaskan	jenis	bawaan
data	atribut data tabel	Array	[]
column	Digunakan untuk mengontrol rendering kolom tabel	Array	[]
columns-props	Digunakan untuk mendefinisikan properti umum untuk semua column	Object
pagination	Apakah akan menampilkan komponen paging, silakan lihat kolom pagination配置untuk detailnya.	Boolean	false

Itu hanya merangkum lapisan dalam Tabel Elemen. Props, event listening, dan pengaturan yang awalnya ditetapkan pada Tabel dapat langsung diikat ke komponen. Untuk konfigurasi spesifik, silakan merujuk ke dokumen Tabel Elemen.

Kolom konfigurasi kolom digunakan untuk mengontrol perilaku kolom tabel. Contoh pengaturan:

 const column = [
  { label : '日期' , prop : 'date' , width : 100 } ,
  { label : '姓名' , prop : 'name' } ,
  { label : '邮编' , prop : 'zip' } ,
  {
    label : '地址' ,
    prop : 'address' ,
    render : ( h , scope ) => {
      return ( < el-tag > { scope . row . address } < el-tag > )
    }
  } ,
  {
    label : '组件' ,
    prop : 'cmp' ,
    component : EditBtn ,
    listeners : {
      'row-edit' ( row ) {
        console . log ( 'row-edit' , row )
      }
    }
  }
]

konfigurasi kolom-props kolom-props digunakan untuk mengonfigurasi atribut props default setiap kolom kolom.

 const columnsProps = {
  align : 'left' ,
  minWidth : 120
}

Konfigurasi pagination digunakan untuk mengontrol tampilan komponen paging. Komponen pagination adalah enkapsulasi sekunder yang mewarisi el-pagination. Ini berasal dari komponen paging di pustaka komponen vue-element-admin di proyek sumber terbuka.

parameter	menjelaskan	jenis	nilai bawaan
total	Jumlah total entri	Number	/
page	Nomor halaman saat ini mendukung pengubah .sync	Number	1
limit	Menampilkan jumlah entri per halaman, mendukung pengubah .sync	Number	20
page-sizes	Menampilkan pengaturan opsi pemilih nomor per halaman	Number[]	[10, 20, 30, 50]
hidden	Apakah akan bersembunyi	Boolean	false
auto-scroll	Apakah akan menggulir ke atas secara otomatis setelah penomoran halaman	Boolean	true

Ini juga mendukung semua atribut yang didukung oleh el-pagination Elemen lainnya. Lihat dokumentasi untuk detailnya

Contoh

 < template >
  < free-table border stripe : data = "data" : column = "column" > </ free-table >
</ template >

< script >
import FreeTable from '@/components/FreeTable'

export default {
  components : {
    FreeTable
  } ,
  data ( ) {
    return {
      column : [
        { label : '日期' , prop : 'date' } ,
        { label : '姓名' , prop : 'name' } ,
        { label : '省份' , prop : 'province' } ,
        { label : '市区' , prop : 'city' } ,
        { label : '地址' , prop : 'address' }
      ] ,
      data : [
        {
          date : '2016-05-03' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        } ,
        {
          date : '2016-05-02' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  }
}
< / script>

Membangun perintah

 # 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

# 启动unit end-to-end 测试
npm run test:e2e

# 检查修复代码
npm run lint