vue free table

vue-free-table

Basierend auf der sekundären Kapselung der Element-UI-Tabelle unterstützt es fast alle Funktionen der Originaltabelle

Dokumentnutzung

DEMO-Vorschau

Merkmal

• Sekundäre Kapselung basierend auf der Element-UI-Tabelle, um die Codemenge zu reduzieren
• Erben Sie die Parameter und Ereignisse der Element-UI-Tabellenkomponente
• Unterstützt Render-Rendering
• Support-Slot-Slot
• Einführung in die Unterstützungskomponente
• Unterstützen Sie Baumdaten
• Unterstützt die Paging-Funktion

dokumentieren

Eigentum	veranschaulichen	Typ	Standard
data	data der Tabelle	Array	[]
column	Wird verwendet, um das Rendern von Tabellenspalten zu steuern	Array	[]
columns-props	Wird verwendet, um Eigenschaften zu definieren, die allen column gemeinsam sind	Object
pagination	Ob die Paging-Komponente angezeigt werden soll, erfahren Sie in der Spalte pagination配置.	Boolean	false

Es kapselt lediglich eine Ebene in der Elementtabelle. Die ursprünglich für die Tabelle festgelegten Requisiten, Ereignisüberwachungen und Einstellungen können direkt an die Komponente gebunden werden. Informationen zur spezifischen Konfiguration finden Sie im Elementtabellendokument.

Die Spaltenkonfigurationsspalte wird verwendet, um das Spaltenverhalten der Tabelle zu steuern. Beispieleinstellung:

 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 )
      }
    }
  }
]

columns-props-Konfiguration columns-props wird verwendet, um die Standard-Props-Attribute jeder Spaltenspalte zu konfigurieren.

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

Die Paginierungskonfigurations- Paginierung wird verwendet, um die Anzeige von Paginierungskomponenten zu steuern. Die Paginierungs-Paginierungskomponente ist eine sekundäre Kapselung, die die Paginierung erbt. Sie stammt aus der Paginierungskomponente in der Komponentenbibliothek vue-element-admin im Open-Source-Projekt.

Parameter	veranschaulichen	Typ	Standardwert
total	Gesamtzahl der Einträge	Number	/
page	Die aktuelle Seitenzahl unterstützt den Modifikator .sync	Number	1
limit	Zeigt die Anzahl der Einträge pro Seite an und unterstützt den Modifikator .sync	Number	20
page-sizes	Zeigt die Optionseinstellungen für die Nummernauswahl pro Seite an	Number[]	[10, 20, 30, 50]
hidden	Ob man sich verstecken soll	Boolean	false
auto-scroll	Ob nach der Paginierung automatisch nach oben gescrollt werden soll	Boolean	true

Es unterstützt auch alle Attribute, die von der El-Paginierung anderer Elemente unterstützt werden. Einzelheiten finden Sie in der Dokumentation

Beispiel

 < 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>

Build-Befehl

 # 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

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

# 检查修复代码
npm run lint