david-elements v0.2.4

A UI plug-in library based on Vue secondary encapsulation is based on elementui

Installation

Using npm: Inline npm i --save david-elements

Use In Vue Application

Global import main.js

    import DavidElements from 'david-elements'
    import 'david-elements/lib/david-element.css'
    Vue.use(DavidElements)

Load components on demand main.js

import DavidElements from 'david-elements'
import 'david-elements/lib/david-element.css'
const { DvTable, DvForm, DvCropper, DvDialog, DvTransfer, DvUpload } = DavidElements;
Vue.use(DvTable)
Vue.use(DvForm)
Vue.use(DvCropper)
Vue.use(DvDialog)
Vue.use(DvTransfer)
Vue.use(DvUpload)

example: HelloWorld.vue

<template>
  <div>
    <dv-table></dv-table>
    <dv-form></dv-form>
    <dv-cropper></dv-cropper>
    <dv-dialog></dv-dialog>
    <dv-transfer></dv-transfer>
    <dv-upload></dv-upload>
  </div>
</template>

Documents

params and method config in component

• DvTable

Attributes

| Attribute | Description | Type | Accepted Values | Default | | :----: | :----: |:----:| :----: | :----: | | tableData | Table data | array | -- | [ ] | | tableOptions | table config | Object | tableOptions | {} | | columns | table column field | array | -- | columns | | | columnsOptions | columns config | Object | columnsOptions | {} | | isRadio | table radio | boolean | -- | false | | isPagination | show the pagination | boolean | -- | true | | total | total of tableData nums | Number | -- | 0 | | pageSize | the pagination set size for pageNum | Number | -- | 10 | | currentPage | the current page in pagination | Number | -- | 1 | | ClickCurrentChange | when the radio row click | Function | @ClickCurrentChange=(row)=>{} | -- | | currentChange | pagination click | Function | @currentChange=(page) => {} | -- | | selectionChange | when the table isSelect, select datas | Function | @selectionChange=(datas) => {} | -- | | clearSelection | clear select in table | ref function | this.$refs.table.clearSelection() | -- | | preview | when the table column type is Img | ref function | -- | -- | | setRowSelection | set the selected data in table | ref function | this.$refs.table.setRowSelection(selectedDatas) | -- |

tableOptions

• height: Number
• border: Boolean
• isSelection: Boolean
• showSelect: Function
• isIndex: Boolean
• indexMethod: Function

columns: Array

• [ { prop: 'the prop name bind of tableData prop', label: 'show name'} ]

columnsOptions

• align: Boolean

• DvForm
• DvCropper
• DvDialog
• DvTransfer
• DvTransfer
• DvUpload

Warning: do not use during the test phase