vue free table

vue-free-table

要素 ui テーブルの二次カプセル化に基づいて、元のテーブルのほぼすべての機能をサポートします。

文書の使用法

デモのプレビュー

特性

• コード量を削減するための要素 UI テーブルに基づく二次カプセル化
• element-ui テーブルコンポーネントのパラメータとイベントを継承します。
• レンダリングのサポート
• サポートスロットスロット
• サポートコンポーネントの紹介
• サポートツリーデータ
• ページング機能をサポート

書類

財産	説明する	タイプ	デフォルト
data	テーブルのdata属性	Array	[]
column	テーブル列のレンダリングを制御するために使用されます	Array	[]
columns-props	すべてのcolumnに共通のプロパティを定義するために使用されます	Object
pagination	ページングコンポーネントを表示するかどうかについては、 pagination配置欄を参照してください。	Boolean	false

要素テーブルのレイヤーをカプセル化するだけです。テーブルに元々設定されていたプロパティ、イベント リスニング、設定をコンポーネントに直接バインドできます。具体的な構成については、要素テーブルのドキュメントを参照してください。

列構成列は、テーブルの列の動作を制御するために使用されます。設定例:

 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 設定columns-props は、列の各列のデフォルトの props 属性を設定するために使用されます。

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

ページネーション構成ページネーションは、ページング コンポーネントの表示を制御するために使用されます。これは、オープン ソース プロジェクトの vue-element-admin コンポーネント ライブラリのページング コンポーネントから派生した 2 番目のカプセル化です。

パラメータ	説明する	タイプ	デフォルト値
total	エントリー総数	Number	/
page	現在のページ番号は.sync修飾子をサポートしています	Number	1
limit	.sync修飾子をサポートして、ページごとのエントリ数を表示します。	Number	20
page-sizes	ページごとの表示番号セレクターのオプション設定	Number[]	[10、20、30、50]
hidden	隠すかどうか	Boolean	false
auto-scroll	ページネーション後に自動的に先頭までスクロールするかどうか	Boolean	true

また、他の要素の el-pagination でサポートされるすべての属性もサポートします。詳細についてはドキュメントを参照してください

例

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

ビルドコマンド

 # 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

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

# 检查修复代码
npm run lint