This is a simple Vue component for rendering tables.API design style refers to the rc-table of ant-design.
npm install m-vtable -S
or
yarn add m-vtable
or add the following script tag to your HTML
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/m-vtable@1.0.0/dist/main.js"></script>
If you are going to use m-vtable with SFC,just import it and register it as a component,then write it into your template.
If you are writing Vue in .html
,just register the m-vtable as below:
new Vue({
el: 'xxx',
template: 'xxx',
components: {
vTable: vTable.default
},
data: {
data: [],
columns: []
}
})
note that it's vTable.default,not vTable or others.
See index.html
data
: {Object} The data Object you want to render as tables with any keys.columns
: {Object} The Object tellsm-vtable
how to render data to tables.It contains these properties:title
{String} The text of column headers to display.render
{Function} The function to render other Vue component in table cells according to the current data.It acceptscreateElement
function and current item of data as params.Note that ifdataIndex
exists in current column,render
wouldn't be invoked.The render function gives you the power to render any components in tables with the data,don't forget to return a vNode after you callcreateElement
.align
{String} The string to set the text align style of current table column.It will be applys as thetext-align
style oftd
element,so you already know the appropriate values of it.dataIndex
{String} The string to tellm-vtable
how to get the value of current column in data object.it must be a key in data item.width
{String} The string to set the width oftd
,will be applied aswidth
style oftd
element.
onHeaderClick
: {Function} The handler of columns header click event,accepts the current item ofcolumns
as param.onRowClick
: {Function} The handler of row click event,accepts current item ofdata
as param.className
: {String} The class name you want to apply to the rendered table.You can custom the style of rendered tables with this class name.