vue hot true 不起作用_Vue + Flask 小知识（二）

微信公众号：萝卜大杂烩
关注可了解更多的原创内容。问题或建议，请公众号留言或加本人微信;如果你觉得文章对你有帮助，欢迎加微信交流

今天继续分享 Vue.js 学习笔记，结合 handsontable。

前面基础的如何使用 Flask + VUE 搭建环境，可以戳这里查看。

Vue + Flask 小知识(一)传送门

Handsontable

Handsontable 是一个网页版的类 excel 工具，其强大的地方已经不言而喻了。我们来看看官网上的几个例子：
漂亮的布局：

支持右键：

支持下拉菜单：

与 Vue 结合

Handsontable 官方提供了 Vue 支持的版本，安装使用也很简单。
安装

npm install handsontable @handsontable/vue

基本使用

<template>
  <hot-table :data="data" rowHeaders="true" colHeaders="true">hot-table>
template>

<script>import { HotTable } from '@handsontable/vue';export default {data: function() {return {data: [
          ["", "Ford", "Volvo", "Toyota", "Honda"],
          ["2016", 10, 11, 12, 13],
          ["2017", 20, 11, 14, 13],
          ["2018", 30, 15, 12, 13]
        ],
      };
    },components: {
      HotTable
    }
  }script>

<style src="../node_modules/handsontable/dist/handsontable.full.css">style>

这样，就把 Handsontable 与 Vue 框架结合到一起了。
下面我们做一些不一样的，从本地 excel 导入数据，在线编辑，最后再下载到本地

导入本地 excel 数据

页面布局

template 文件

<template>
  <div id="hot-preview">
          <div class="controls">
          <input accept=".xlsx" id="pop_file" type="file" value="选择模板" @change="impt(this)" />
          <el-button type="primary" name="save" id="save" class="intext-btn" v-on:click="save()">Saveel-button>
          <el-button type="primary" id="download" name="download" v-on:click="down()" class="intext-btn">Downloadel-button>
        div>
    <HotTable :root="root" ref="testHot" :settings="hotSettings" id="hottable">HotTable>
  div>
template>

布局效果：

对于 save 的处理，我的设想是保存到后台数据库中，暂时还未实现，就留到下次的分享了。

script 脚本

<script>import { HotTable } from '@handsontable/vue'import Handsontable from 'handsontable';import utl from '../../utils/utl'import xHred from '../../utils/header'export default {data: function() {return {root: 'test-hot',hotSettings: {// data: [['sample', 'data']],
          data: [        //数据可以是二维数组，也可以是数组对象                
          ],minRows: 1,  //最小行列
          minCols: 5,rowHeaders: true,//行表头，可以使布尔值(行序号)，可以使字符串(左侧行表头相同显示内容，可以解析html)，也可以是数组(左侧行表头单独显示内容)。
          colHeaders:   [ 'ID','账号', '用户名', '爱好', '能力', '频率','颜值',],//自定义列表头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:'表格线'
                },"copy":{name:'复制'
                },"cut":{name:'剪切'
                },"commentsAddEdit": {name: '添加备注',
                },"commentsRemove": {name: '取消备注',
                },"freeze_column": {name: '固定列',
                },"unfreeze_column": {name: '取消列固定',
                },"hsep2": "---------",
            }
          },manualColumnFreeze: true, //手动固定列  ?
          manualColumnMove: true, //手动移动列
          manualRowMove: true,   //手动移动行
          manualColumnResize: true,//手工更改列距
          manualRowResize: true,//手动更改行距
          comments: true, //添加注释  ?
          cell: [  
            {row: 1, col: 1, comment: {value: 'this is test'}},
          ],customBorders:[],//添加边框
          columnSorting: true,//排序
                    sortIndicator: true,autoColumnSize: true,dropdownMenu: true,stretchH: 'all',//根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展
          fillHandle: true, //选中拖拽复制 possible values: true, false, "horizontal", "vertical"
          fixedColumnsLeft: 2,//固定左边列数
          fixedRowsTop: 2,//固定上边列数
          mergeCells: [   //合并// {row: 1, col: 1, rowspan: 3, colspan: 3},  //指定合并，从(1,1)开始行3列3合并成一格// {row: 3, col: 4, rowspan: 2, colspan: 2}
          ],columns: [     //添加每一列的数据类型和一些配置
            {},
        {},
        {},
        {},
        {},
        {},
            {}
          ],
        }
      };
    },methods:{// 导入数据
            impt() {const file = document.getElementById('pop_file');const hotinstance = this.$refs.testHot.hotInstance
                utl.XLSX.onImport(file, function () {var rt = utl.XLSX.getSheetsByIndex();
                    rt.forEach(function (value, index, array) {var myData = new Array();for (var i = 0; i                         var inner = [array[i]["ID"], array[i]["账号"], array[i]["用户名"]]
                        myData.push(inner);
                    }
                    hotinstance.loadData(myData);
                    });
                    });
                },//下载数据
            down() {const hotinstance = this.$refs.testHot.hotInstancevar d = utl.Object.copyJson(hotinstance.getSourceData());var tmp = new Array();for (var i = 0; i                     var inner = {ID: d[i][0], 账号: d[i][1], 用户名: d[i][2]};
                    tmp.push(inner);
                }
                tmp.unshift(utl.Object.reverse(xHred));
                utl.XLSX.onExport(tmp);
                },
    },components: {
      HotTable
    }
  }script>

<style src="../../../node_modules/handsontable/dist/handsontable.full.css">style>

下面我们来逐步看下

首先说下 utl.js 文件，其实是在网上找的佚名大神的代码，哈哈哈，拿来即用。里面封装了对 excel 的相关操作，是核心的核心。
然后在 header.js 中，定义了表格所拥有的列

const xHred = {
    "ID": "ID",
    "账号": "账号",
    "用户名": "用户名",
    "爱好": "爱好",
    "能力": "能力",
    "频率": "频率",
    "颜值": "颜值"
    };

export default xHred;

至于 hotSettings 里的内容，都是 Handsontable 官网的内容，通读官方文档很重要哦。

下面，来看看 impt 函数
首先获取到选择文件 input 控件中选择的 .xlsx 文件，然后调用 utl.js 中封装的函数 omImport，把数据导入到内存中，接着再遍历数据，再导入到 Handsontable 实例中，即页面的表格中。

对于 down，其实也差不多
把页面表格中的数据导入到内存中，然后调用 onExport 函数，导出到本地。
我们来看看导入时的效果

对于 download 就不再演示了，小伙伴儿们自行尝试下吧。

希望大家喜欢这个 Vue 系列

猜泥稀饭：

从头搭建一个在线聊天室(一)

从头搭建一个在线聊天室(二)

从头搭建一个在线聊天室(三)

从头搭建一个在线聊天室(四)