Vue + Flask 小知识（二）

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>

<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()">Save</el-button>
          <el-button type="primary" id="download" name="download" v-on:click="down()" class="intext-btn">Download</el-button>
        </div>
    <HotTable :root="root" ref="testHot" :settings="hotSettings" id="hottable"></HotTable>
  </div>
</template>

<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 < array.length; i++) {
                        var inner = [array[i]["ID"], array[i]["账号"], array[i]["用户名"]]
                        myData.push(inner);
                    }
                    hotinstance.loadData(myData);
                    });
                    });
                },
            //下载数据
            down() {
                const hotinstance = this.$refs.testHot.hotInstance
                var d = utl.Object.copyJson(hotinstance.getSourceData());
                var tmp = new Array();
                for (var i = 0; i < d.length; 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>

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