Network Pipe Manufacturer

    v2-table

    3.0.3 • Public • Published

    build pass npm-version license

    中文 README

    v2-table

    A simple table component based Vue 2.x.

    Installation

    Install the pkg with npm:

    npm i --save v2-table beautify-scrollbar
    

    or yarn

    yarn add  v2-table beautify-scrollbar
    

    Get Started

    import Vue from 'vue';
    
    import 'beautify-scrollbar/dist/index.css'; 
    import 'v2-table/dist/index.css'; 
    import V2Table from 'v2-table';
    
    Vue.use(V2Table)
    
    <template>
      <v2-table :data="list">
        <v2-table-column label="Name" prop="name"></v2-table-column>
        <v2-table-column label="Date" prop="date"></v2-table-column>
        <v2-table-column label="Address" prop="address"></v2-table-column>  
      </v2-table>  
    </template>
    
    <script>
      export default {
        data () {
          return {
            list: [{
              date: '2017-12-02',
              name: 'test1',
              address: 'Shenzhen,China'
            }, {
              date: '2017-11-02',
              name: 'test2',
              address: 'Guangzhou,China'
            }, {
              date: '2018-01-02',
              name: 'test3',
              address: 'Shaoyang,Hunan'
            }, {
              date: '2017-10-02',
              name: 'test4',
              address: 'Changsha,Hunan'
            }]
          }
        }
      }
    </script>
    

    More demo to visit here.

    Available Props

    The v2-table component

    Attribute Type Accepted Values Default Description
    data Array - [] table data
    border Boolean - false whether show table border
    stripe Boolean - false whether table is striped
    loading Boolean - false show loading component
    empty-text String - No Data Displayed text when data is empty. You can customize this area with slot="empty"
    default-sort Object order: ascending/descending if prop is set, and order is not set, then order is default to ascending set the default sort column and order. property prop is used to set default sort column, property order is used to set default sort order
    row-class-name String/Function({row, rowIndex}) - - function that returns custom class names for a row, or a string assigning class names for every row
    pagination-info Object - { text: '', pageSize: 10, nextPageText: 'Next', prevPageText: 'Prev' } pagination info for table data
    shown-pagination Boolean - false whether showing pagination of table data
    total Number - 0 all data of table, it's needed when shown-pagination is true
    height Number/String - auto table's height
    cell-height Number/String - 44 cell's height
    show-summary Boolean - false whether to display a summary row
    sum-text String - Sum displayed text for the first column of summary row
    summary-method Function({ columns, data }) - - custom summary method
    lazy-load Boolean - false whether enable lazy-load
    col-height Number/String - 40 header columns' height

    Table Events

    Event Name Description Parameters
    sort-change triggers when table's sorting changes { prop, order }
    page-change triggers when table's page changes currentPage
    select-change triggers when selection changes rows

    Table Methods

    Event Name Description Parameters
    toggleRowSelection used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected row, selected
    updateScrollbar update the scrollbar config for the table isReset(whether reset scrollbar, default value is false)

    Table Slot

    Name Description
    empty custom empty component, it's will show when data is empty
    loading custom loading component, it's will show when loading property of table is true

    The v2-table-column component

    Attribute Type Accepted Values Default Description
    label String - - column label
    prop String - - field name
    width String/Number - - column width
    sortable Boolean true/false false whether column can be sorted.
    align String left/center/right center alignment
    fixed String left/right - fixed column to left or right
    type String - - type of the column
    render-header Function(h, { column }) - - render function for table header of this column

    Development

    git clone git@github.com:dwqs/v2-table.git
     
    cd v2-table
     
    npm i 
     
    npm run dev

    Thanks

    LICENSE

    MIT

    Install

    npm i v2-table

    DownloadsWeekly Downloads

    182

    Version

    3.0.3

    License

    MIT

    Unpacked Size

    77.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • dwqs