/vue-data-tables

vue2.0 datatables,based on element-ui, el-table + el-pagination + filter + sort

Primary LanguageVueMIT LicenseMIT

vue-data-tables

vue2.0 DataTables, based on element-ui, el-table + el-pagination + custom filter and sort

preview

Online demo

Install ElementUI and vue-data-tables

npm install element-ui

npm install vue-data-tables

Usage

  1. import to your project as plugin.

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'
    import DataTables from 'vue-data-tables'
    
    Vue.use(ElementUI)
    Vue.use(DataTables)

    If you don't want import the whole element-ui, you can just load corresponding components refer to On demand section of element-ui doc

    This lib depends on the following components:

    • el-table
    • el-table-column
    • el-row
    • el-col
    • el-input
    • el-button
    • el-pagination
    • el-checkbox
    • el-checkbox-group
  2. use in your project.

    <template>
      <data-tables
        :data='tableData',    
        :tool-bar-def='toolBarDef',
        :row-action-def='rowActionsDef',
        @row-click='rowClick'>
        <el-table-column prop="flow_no"
          label="服务编号"
          sortable="custom">
        </el-table-column>
        <el-table-column
          prop="flow_no"
          label="服务编号"
          sortable="custom">
        </el-table-column>
      </data-tables>
    </template>

Attributes

Property layer1 sub proptery layer2 sub proptery Desc Type Default values
data The data array which will be render in the table. Array -
border whether table has vertical border. Boolean true
stripe whether table is striped. Boolean true
tableProps an object to pass any proptery to el-table. refer to el-table proptery Object undefined
actions-def Define the actions, which belongs to table. Object -
width grid(24 grids) width of actions bar. actions bar, checkbox and searchbox are in a el-row as el-cols Number 5
offset offset of actions bar Number 0
def Define the actions Array []
name the ation button label text String -
icon icon of the button String -
handler handler of the click Function -
checkbox-filter-def Define the checkbox filter Object -
width grid width of checkbox Number 14
offset grid offset of checkbox Number 0
props Indicate proptery[s] in the data which will be used to filter data by checkbox filter. String | Array []
filterFunction customize filter function Function -
def grid offset of checkbox Array []
name the checkbox label text String -
code the value of this checkbox stands for String -
search-def Define the search box Object -
show show or hide search box Boolean true
props indicate proptery[s] in the data which will be used to filter data by search box. Array | String All
width grid width of search box Number 5
offset grid offset of search box Number 0
filterFunction customize filter function Function -
placeholder searchbox placeholder String ""
action-col-fixed Determine wether action column is fixed. left means action column fix to left, right means action column fix to right. undefined means not fix String undefined
row-action-def Define the actions, which belongs to row Array []
name the row action button text String -
type type of the button String text
buttonProps an object to pass any proptery to el-button. refer to el-button proptery Function -
handler handler of the click Function -
action-col-width Define the min-width of the action column. unit: px. String -
col-not-row-click indicated column[s] which can not trigger row click String | Array the action column
has-action-col Determine wether show action column Boolean true
action-col-label indicated the header text of the action column String "操作"
pagination-def define pagination. Object -
layout refer to Elmeme Doc String [prev, pager, next, jumper, sizes, total]
pageSize refer to Elmeme Doc Number 20
pageSizes refer to Elmeme Doc Array [20, 50, 100]
currentPage refer to Elmeme Doc Number 1

For details, check the Demo and Demo Code.

Event

Event Desc params
row-click Emit when row is clicked row, event, column
selection-change Emit when selection is changed currentRow, oldCurrentRow
select Emit when row is selected selection
select-all Emit when select-all is clicked selection
filtered-data Emit when filter condition changes filteredData

For details, check the Demo and Demo Code.

Dev

# install dependencies
npm install

# serve test/play with hot reload at localhost:8080
npm run play

# serve docs with hot reload at localhost:8080
npm run dev