Vue + Flask 小知识（二）
今天继续分享 Vue.js 学习笔记，结合 handsontable。
前面基础的如何使用 Flask + VUE 搭建环境，可以戳这里查看。
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()">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>布局效果：
对于 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 < 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>下面我们来逐步看下
首先说下 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 系列
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-07-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录