VueHandsontable form
VueHandsontable is a datagrid with the functionality and look and feel of a spreadsheet. It can be easily modified or extended with custom plugins. It binds to any data source and handles large numbers of records using the JSON format. It supports operations such as filtering, sorting and CRUD (create, read, update, delete), as well as advanced operations - multi-column sorting, creating custom cell types and adding data summaries.
basic form
:::demo After the object array hot-tableis injected into the element data, hot-columnuse datathe attribute to correspond to the key name in the object to fill in the data, and use titlethe attribute to define the column name of the table. Attributes can be used widthto define column widths.
<template>
<hot-table
:data-source="tableData"
:settings="settings"
>
<hot-column data="date" title="日期" width="180" cell-renderer='123'/></hot-column>
<hot-column data="name" title="姓名" width="180"/></hot-column>
<hot-column data="address" title="地址"/></hot-column>
</hot-table>
</template>
<script>
export default {
data() {
return {
settings: {
showSelection: false,
},
tableData: [],
};
},
mounted(){
this.tableData = [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
}]
}
};
</script>
:::
Form drag and drop
Set the dragCheck attribute to enable table dragging.
The :::demo dragCheckattribute can be used for table dragging. It accepts one Boolean, default is false, set to trueenable.
<template>
<hot-table
:data-source="tableData"
:settings="settings"
>
<hot-column data="date" title="日期" width="180"/></hot-column>
<hot-column data="name" title="姓名" width="180"/></hot-column>
<hot-column data="address" title="地址"/></hot-column>
</hot-table>
</template>
<script>
export default {
data() {
return {
settings: {
showSelection: false,
dragCheck: true,
},
tableData: [],
};
},
mounted(){
this.tableData = [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
}]
}
};
</script>
:::
table sort
Set the columnSorting attribute to sort the table.
The :::demo columnSortingattribute can sort the table. It accepts one Boolean, default is false, set to trueenable.
<template>
<hot-table
:data-source="tableData"
:settings="settings"
>
<hot-column data="date" title="日期" width="180"/></hot-column>
<hot-column data="name" title="姓名" width="180"/></hot-column>
<hot-column data=