vue free table

table sans vue

Basé sur l'encapsulation secondaire de l'élément ui table, il prend en charge presque toutes les fonctions de la table d'origine

Utilisation des documents

Aperçu DEMO

caractéristiques

• Encapsulation secondaire basée sur la table element-ui pour réduire la quantité de code
• Hériter des paramètres et des événements du composant de table element-ui
• Prise en charge du rendu
• Emplacement de support
• Présentation des composants de support
• Données de l'arborescence de support
• Fonction de radiomessagerie

document

propriété	illustrer	taper	défaut
data	attribut data de la table	Array	[]
column	Utilisé pour contrôler le rendu des colonnes du tableau	Array	[]
columns-props	Utilisé pour définir les propriétés communes à toutes column	Object
pagination	Que ce soit pour afficher le composant de pagination, veuillez consulter la colonne pagination配置pour plus de détails.	Boolean	false

Il encapsule simplement une couche dans la table des éléments. Les accessoires, l'écoute des événements et les paramètres initialement définis sur la table peuvent être directement liés au composant. Pour une configuration spécifique, veuillez vous référer au document Element Tabel.

La colonne de configuration de colonne est utilisée pour contrôler le comportement de la colonne de la table. Exemple de paramètre :

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

Configuration de columns-props columns-props est utilisé pour configurer les attributs props par défaut de chaque colonne de colonnes.

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

La configuration de la pagination est utilisée pour contrôler l'affichage des composants de pagination. Le composant de pagination est une encapsulation secondaire qui hérite de l'el-pagination. Elle provient du composant de pagination de la bibliothèque de composants vue-element-admin du projet open source.

paramètre	illustrer	taper	valeur par défaut
total	Nombre total d'entrées	Number	/
page	Le numéro de page actuel prend en charge le modificateur .sync	Number	1
limit	Afficher le nombre d'entrées par page, prenant en charge le modificateur .sync	Number	20
page-sizes	Afficher les paramètres des options du sélecteur de numéro par page	Number[]	[10, 20, 30, 50]
hidden	S'il faut se cacher	Boolean	false
auto-scroll	S'il faut faire défiler automatiquement vers le haut après la pagination	Boolean	true

Il prend également en charge tous les attributs pris en charge par l'el-pagination d'autres éléments. Voir la documentation pour plus de détails

Exemple

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

Commande de construction

 # 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

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

# 检查修复代码
npm run lint