For projects built with vue, how do you save the handsontable data processor and render it

18911295210 · October 12, 2018, 5:43am

aleksandra_budnik · October 12, 2018, 7:40am

I am not sure what you mean. Can you share more information?

18911295210 · October 12, 2018, 10:05am

That is to save the formula, continue to edit it next time you open it, and the formula is still there.

aleksandra_budnik · October 12, 2018, 11:19am

If you would like to save it as a file, it will always show only the result. But if you would like to copy/paste or save/load the table data you refer to the getSourceData() method which returns the exact formula attached to the cell.

18911295210 · October 12, 2018, 11:41am

Are there any related cases? Our company may use this function for a long time. Where is getSourceData () written in Vue? I think the demo on the Internet is native JS, written under the instance object, but Vue has no instance object

Part code as follows

<div id="hotTable" v-if="switcher" class="hotTable">
  <HotTable :root="root" ref="testHot" :settings="hotSettings"></HotTable>
</div>

import { HotTable } from '@handsontable-pro/vue'; export default { data () { return { switcher: false, // 表格数据 root: 'test-hot', hotSettings: { data: [ // 数据可以是二维数组，也可以是数组对象 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] ], rowHeaders: true, // 行表头，可以使布尔值（行序号），可以使字符串（左侧行表头相同显示内容，可以解析html），也可以是数组（左侧行表头单独显示内容）。 colHeaders: true, // 自定义列表头or 布尔值 autoWrapRow: true, // 自动换行 contextMenu: { // 自定义右键菜单，可汉化，默认布尔值 items: { 'row_above': { name: '上方插入一行' }, 'row_below': { name: '下方插入一行' }, 'col_left': { name: '左方插入列' }, 'col_right': { name: '右方插入列' }, 'hsep1': '---------', // 提供分隔线 'remove_row': { name: '删除行' }, 'remove_col': { name: '删除列' }, 'make_read_only': { name: '只读' }, 'borders': { name: '表格线' }, 'commentsAddEdit': { name: '添加备注' }, 'commentsRemove': { name: '取消备注' }, 'freeze_column': { name: '固定列' }, 'unfreeze_column': { name: '取消列固定' }, 'hsep2': '---------' } }, // 右键效果 formulas: true, // 计算公式 fillHandle: true, // 选中拖拽复制 possible values: true, false, "horizontal", "vertical" fixedColumnsLeft: 0, // 固定左边列数 fixedRowsTop: 0, // 固定上边列数 afterChange: function (changes, source) { // 数据改变时触发此方法 debugger }, manualColumnFreeze: true, // 手动固定列 manualColumnMove: true, // 手动移动列 manualRowMove: true, // 手动移动行 manualColumnResize: true, // 手工更改列距 manualRowResize: true, // 手动更改行距 comments: true, // 添加注释 cell: [ {row: 1, col: 1, comment: {value: '请添加自己注释'}} ], customBorders: [], // 添加边框 columnSorting: true, // 排序 stretchH: 'none'// 根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展 } }; }, components: { HotTable },

aleksandra_budnik · October 12, 2018, 12:09pm

Hi @18911295210

please take a look at line 18 of this demo https://codepen.io/anon/pen/QVKBLZ?editors=1010
It gets a reference to the instance.

18911295210 · October 13, 2018, 2:14am

Thank you for your reply and help.

I still don’t understand. This is directly written on the Vue instance. Is there a detailed demo in the component?

How to save it as a string with formula instead of saving it as a local file

aleksandra_budnik · October 15, 2018, 1:12pm

I am afraid that I do not have a demo for that scenario.
Did you many any progress on that subject?

18911295210 · October 16, 2018, 7:58am

Now that almost done, the question is, how do you automatically add an empty line when you edit to the last line?

aleksandra_budnik · October 16, 2018, 9:10am

Please find the demo attached

http://jsfiddle.net/uhf2kync/

I am using alter method inside the afterChange hook to add a new row when user changes anything in the last row.

18911295210 · October 16, 2018, 10:30am

Thank you. This function has been realized. How can I get the data of the form in methods of Vue?

aleksandra_budnik · October 16, 2018, 10:44am

which form?

18911295210 · October 16, 2018, 10:59am

Thank you. I’ve already done it.

aleksandra_budnik · October 16, 2018, 11:54am

OK, great

So i believe that we can close the topic.

If you’d need anything please create a new one.