强大的表格控件handsometable，结合vue

handsontable

• handsontable是目前在前端界最接近excel的插件，可以执行编辑，复制粘贴，插入删除行列，排序等复杂操作。jQuery、react、ng和vue版本，功能强大，是复杂表格的不二之选。本文简单介绍在vue-cli环境下怎么使用。

• 案例：百度图说，官网例子

• 1.安装与配置

  • npm包安装

  npn install vue-handsontable-official --save

  npn install expose-loader --save-dev//不安装会有错误提示

  • webpack配置（vue-cli）,在webpack.base.conf.js中添加一下代码

    {
          test: require.resolve('numbro'),
          loader: 'expose-loader?numbro' }, { test: require.resolve('moment'), loader: 'expose-loader?moment' }, { test: require.resolve('pikaday'), loader: 'expose-loader?Pikaday' }, { test: require.resolve('zeroclipboard'), loader: 'expose-loader?ZeroClipboard' }

  2.具体API

  <template>
    <div>
        <div id="example-container" class="wrapper"> <HotTable :root="root" :settings="hotSettings"></HotTable> </div> </div> </template> <script> import moment from 'moment'; //引入handsontable依赖的插件 import numbro from 'numbro'; import pikaday from 'pikaday'; //日期插件 import Zeroclipboard from 'zeroclipboard'; import Handsontable from 'handsontable'; import HotTable from 'vue-handsontable-official'; import Vue from 'vue'; export default { data: function () { return { root: 'test-hot', hotSettings: { data: [ //数据，可以是数据，对象 ['20080101', 10, 11, 12, 13,true], ['20090101', 20, 11, 14, 13,true], ['20010101', 30, 15, 12, 13,true], ['20010101', 32, 213, 21, 312,true], ['20010201', 32, 213, 21, 312,true], ['20010301', 32, 213, 21, 312,true], ['20010401', 32, 213, 21, 312,true], ['20010501', 32, 213, 21, 312,true], ['20010601', 32, 213, 21, 312,true] ], startRows: 11,//行列范围 startCols: 6, minRows: 5, //最小行列 minCols: 5, maxRows: 20, //最大行列 maxCols: 20, rowHeaders: true,//行表头 colHeaders: ['时间', 'Kia', 'Nissan', 'Toyota', 'Honda','123'],//自定义列表头or 布尔值 minSpareCols: 2, //列留白 minSpareRows: 2,//行留白 currentRowClassName: 'currentRow', //为选中行添加类名，可以更改样式 currentColClassName: 'currentCol',//为选中列添加类名 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": "---------", } },//右键效果 fillHandle: true, //选中拖拽复制 possible values: true, false, "horizontal", "vertical" fixedColumnsLeft: 0,//固定左边列数 fixedRowsTop: 0,//固定上边列数 mergeCells: [ //合并 {row: 1, col: 1, rowspan: 3, colspan: 3}, //指定合并，从（1,1）开始行3列3合并成一格 {row: 3, col: 4, rowspan: 2, colspan: 2} ], columns: [ //添加每一列的数据类型和一些配置 { type: 'date', //时间格式 dateFormat: 'YYYYMMDD', correctFormat: true, defaultDate: '19000101' }, { type: 'dropdown', //下拉选择 source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'], strict: false //是否严格匹配 }, {type: 'numeric'}, //数值 {type: 'numeric', 

转载于:https://www.cnblogs.com/yuwenjing0727/p/7462982.html