element ui tree table

element-ui-tree-table

Erweitern Sie die ElementUI-Tabellenkomponente, um die Baumstruktur zu unterstützen

Installieren

npm install element-ui-tree-table -S

Verwendung

Das Projekt hängt von Element-UI ab. Sie müssen es zuerst vorstellen

einführen

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

verwenden

Testdaten

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

Konfigurationselemente

Eigentum	Typ	veranschaulichen	Standardwert
Daten	Array	Für die Datenquelle muss standardmäßig ein rowKey-Attribut angegeben werden, um die Zeile eindeutig zu identifizieren	-
ID-Schlüssel	Zeichenfolge	Eindeutiger Index der Datenquelle	rowKey
Spalten	Array	Indexspalten konfigurieren, Spalten auswählen und Spalten erweitern	-
Symbol	Zeichenfolge	Symbol erweitern	el-icon-caret-right
Trigger-Klasse	Zeichenfolge	Schaltflächenklasse erweitern	-
Reserve erweitert	Boolescher Wert	Ob der erweiterte Status beibehalten werden soll. Es wird empfohlen, die Standarderweiterung nicht festzulegen, wenn diese Eigenschaft auf „true“ gesetzt ist. Das Beibehalten des erweiterten Status kann durch Abhören von Triggern erreicht werden.	-
Ursprüngliche Tabellenkonfigurationselemente	-	Weitere Informationen finden Sie in der Dokumentation zu element-ui	-

Spaltenkonfigurationselement

Beachten:

• Das erste Element, dessen Typ nicht Index und Auswahl ist, wird als Erweiterungsschaltfläche zum Platzieren der Spalte behandelt.
• Es kann nur eine erweiterte Spalte geben und alle zusätzlichen Spalten werden ignoriert.

Erweitern Sie die Spaltenkonfiguration

Eigentum	Typ	veranschaulichen	Optionaler Wert
Etikett	Zeichenfolge	Angezeigter Titel	-
Stütze	Zeichenfolge	Der Feldname entspricht dem Spalteninhalt, Sie können auch das Eigenschaftsattribut verwenden	-
ausrichten	Zeichenfolge	Ausrichtung	links/mitte/rechts
Breite	Zeichenfolge	Entsprechende Spaltenbreite	-
behoben	String,Boolean	Unabhängig davon, ob die Spalte links oder rechts fixiert ist, bedeutet true, dass sie links fixiert ist
Render-Header	Funktion(h, { Spalte, $index })	Funktion, die für die Darstellung des Spaltentitel-Beschriftungsbereichs verwendet wird
Klassenname	Zeichenfolge	Spaltenklassenname
Label-Klassenname	Zeichenfolge	Benutzerdefinierter Klassenname für die aktuelle Spaltenüberschrift
Überlauf-Tooltip anzeigen	Boolescher Wert	Tooltip anzeigen, wenn der Inhalt zu lang ist und ausgeblendet wird
Mindestbreite	Zeichenfolge	Die minimale Breite der entsprechenden Spalte. Der Unterschied zu „width“ besteht darin, dass die Breite fest ist und „min-width“ die verbleibende Breite proportional der Spalte zuweist, für die „min-width“ festgelegt ist.
header-align	Zeichenfolge	Wenn dieses Element nicht festgelegt ist, wird die Ausrichtung der Tabelle verwendet.	links/mitte/rechts
veränderbar	Boolescher Wert	Ob die Breite der entsprechenden Spalte durch Ziehen geändert werden kann (das Rahmenattribut muss auf true gesetzt sein)

Normale Spaltenkonfiguration

Eigentum	Typ	veranschaulichen	Optionaler Wert
Typ	Zeichenfolge	Entsprechender Spaltentyp: Wenn die Auswahl festgelegt ist, wird das Mehrfachauswahlfeld angezeigt. Wenn der Index festgelegt ist, wird der Index der Zeile angezeigt.	Auswahl/Index
Etikett	Zeichenfolge	Angezeigter Titel	-
Stütze	Zeichenfolge	Der Feldname entspricht dem Spalteninhalt, Sie können auch das Eigenschaftsattribut verwenden	-
ausrichten	Zeichenfolge	Ausrichtung	links/mitte/rechts
Breite	Zeichenfolge	Entsprechende Spaltenbreite	-
behoben	String,Boolean	Unabhängig davon, ob die Spalte links oder rechts fixiert ist, bedeutet true, dass sie links fixiert ist
Render-Header	Funktion(h, { Spalte, $index })	Funktion, die für die Darstellung des Spaltentitel-Beschriftungsbereichs verwendet wird
Klassenname	Zeichenfolge	Spaltenklassenname
Label-Klassenname	Zeichenfolge	Benutzerdefinierter Klassenname für die aktuelle Spaltenüberschrift
wählbar	Funktion(Zeile, Index)	Es gilt nur für Spalten mit type=selection. Der Typ ist Function. Der Rückgabewert von Function wird verwendet, um zu bestimmen, ob die CheckBox dieser Zeile überprüft werden kann.
Überlauf-Tooltip anzeigen	Boolescher Wert	Tooltip anzeigen, wenn der Inhalt zu lang ist und ausgeblendet wird
Mindestbreite	Zeichenfolge	Die minimale Breite der entsprechenden Spalte. Der Unterschied zu „width“ besteht darin, dass die Breite fest ist und „min-width“ die verbleibende Breite proportional der Spalte zuweist, für die „min-width“ festgelegt ist.
header-align	Zeichenfolge	Wenn dieses Element nicht festgelegt ist, wird die Ausrichtung der Tabelle verwendet.	links/mitte/rechts
veränderbar	Boolescher Wert	Ob die Breite der entsprechenden Spalte durch Ziehen geändert werden kann (das Rahmenattribut muss auf true gesetzt sein)

Ereignis

Veranstaltungsname	Wirkung	Parameter
auslösen	Wird ausgelöst, wenn sich der erweiterte Status ändert, und wird im Allgemeinen zum Speichern des Status verwendet	(Datendatenquellenknoten, erweiterter Zustand)

Verfahren

Methodenname	Wirkung	Parameter
expandAll	Alles erweitern	-
kollabierenAlle	alles verstecken	-

Weitere Informationen finden Sie in der Dokumentation zu element-ui