element ui tree table Télécharger - element ui tree table Code source télécharger

element ui tree table

Autres catégories

1.0

Télécharger

élément-ui-tree-table

Étendre le composant de table ElementUI pour prendre en charge la structure arborescente

Installer

npm install element-ui-tree-table -S

Usage

Le projet dépend d'Element-UI, vous devez d'abord le présenter

introduire

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

utiliser

données de test

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

Éléments de configuration

propriété	taper	illustrer	valeur par défaut
données	Tableau	Source de données, nécessite qu'un attribut rowKey soit spécifié par défaut pour identifier la ligne de manière unique	-
clé d'identification	Chaîne	Index unique de la source de données	Clé de ligne
colonnes	Tableau	Configurer les colonnes d'index, sélectionner les colonnes et développer les colonnes	-
icône	Chaîne	icône développer	el-icon-caret-right
classe de déclenchement	Chaîne	Développer la classe de bouton	-
réserve élargie	Booléen	S'il faut conserver l'état développé, il est recommandé de ne pas définir l'expansion par défaut lorsque cette propriété est vraie. La conservation de l'état développé peut être obtenue en écoutant les déclencheurs.	-
Éléments de configuration de table d'origine	-	Reportez-vous à la documentation de l'élément-ui	-

élément de configuration des colonnes

Avis:

Le premier élément dont le type n'est pas index et sélection sera traité comme un bouton de développement pour placer la colonne.
Il ne peut y avoir qu’une seule colonne développée et toutes les colonnes supplémentaires seront ignorées.

Développer la configuration des colonnes

propriété	taper	illustrer	Valeur facultative
étiquette	Chaîne	Titre affiché	-
soutenir	Chaîne	Le nom du champ correspondant au contenu de la colonne, vous pouvez également utiliser l'attribut property	-
aligner	Chaîne	Alignement	gauche/centre/droite
largeur	Chaîne	Largeur de colonne correspondante	-
fixé	Chaîne, booléen	Que la colonne soit fixée à gauche ou à droite, vrai signifie fixée à gauche
en-tête de rendu	Fonction(h, { colonne, $index })	Fonction utilisée pour le rendu de la zone d'étiquette du titre de colonne
nom de classe	Chaîne	Nom de classe de colonne
nom-classe-étiquette	Chaîne	Nom de classe personnalisé pour l'en-tête de colonne actuel
show-overflow-info-bulle	Booléen	Afficher une info-bulle lorsque le contenu est trop long et masqué
largeur minimale	Chaîne	La largeur minimale de la colonne correspondante. La différence avec width est que la largeur est fixe et min-width allouera proportionnellement la largeur restante à la colonne pour laquelle min-width est définie.
aligner l'en-tête	Chaîne	Alignement de l'en-tête Si cet élément n'est pas défini, l'alignement du tableau sera utilisé.	gauche/centre/droite
redimensionnable	Booléen	Si la largeur de la colonne correspondante peut être modifiée en faisant glisser (l'attribut border doit être défini sur true)

Configuration normale des colonnes

propriété	taper	illustrer	Valeur facultative
taper	Chaîne	Type de colonne correspondant, si la sélection est définie, la boîte de sélection multiple sera affichée ; si l'index est défini, l'index de la ligne sera affiché.	sélection/index
étiquette	Chaîne	Titre affiché	-
soutenir	Chaîne	Le nom du champ correspondant au contenu de la colonne, vous pouvez également utiliser l'attribut property	-
aligner	Chaîne	Alignement	gauche/centre/droite
largeur	Chaîne	Largeur de colonne correspondante	-
fixé	Chaîne, booléen	Que la colonne soit fixée à gauche ou à droite, vrai signifie fixée à gauche
en-tête de rendu	Fonction(h, { colonne, $index })	Fonction utilisée pour le rendu de la zone d'étiquette du titre de colonne
nom de classe	Chaîne	Nom de classe de colonne
nom-de-classe-étiquette	Chaîne	Nom de classe personnalisé pour l'en-tête de colonne actuel
sélectionnable	Fonction (ligne, index)	Il n'est valide que pour les colonnes avec type=selection. Le type est Function. La valeur de retour de Function est utilisée pour déterminer si le CheckBox de cette ligne peut être vérifié.
show-overflow-info-bulle	Booléen	Afficher une info-bulle lorsque le contenu est trop long et masqué
largeur minimale	Chaîne	La largeur minimale de la colonne correspondante. La différence avec width est que la largeur est fixe et min-width allouera proportionnellement la largeur restante à la colonne pour laquelle min-width est définie.
aligner l'en-tête	Chaîne	Alignement de l'en-tête Si cet élément n'est pas défini, l'alignement du tableau sera utilisé.	gauche/centre/droite
redimensionnable	Booléen	Si la largeur de la colonne correspondante peut être modifiée en faisant glisser (l'attribut border doit être défini sur true)

événement

nom de l'événement	effet	paramètre
déclenchement	Déclenché lorsque l'état développé change, généralement utilisé pour sauvegarder l'état	(nœud de source de données de données, état développé)