/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 ""
row-action-def Define the actions, which belongs to row Array []
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
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