使用vue-handsontable实现web execl编辑

npm install --save vue-handsontable-official

<template>
  <div class="wrap">
    <HotTable :root="test" :settings="hotSettings"></HotTable>
  </div>
</template>
<script>
import HotTable from 'vue-handsontable-official'
import 'handsontable/languages/zh-CN'
import Vue from 'vue'
export default {
  data: function() {
    return {
      test: 'test-hot',
      hotSettings: {
        licenseKey: 'non-commercial-and-evaluation',
        data: [], // 数据在这个里面,由数据填充表
        startRows: 10, //初始行列数
        startCols: 7,
        minRows: 20, //最小行列
        maxRows: 20,
        rowHeaders: true, //行表头
        colHeaders: [
          '姓名',
          '年龄',
          '性别',
          '出生日期',
          '血糖',
          '血压',
          '次数',
        ], //自定义列表头or 布尔值
        minSpareRows: 1, // 下方总是空一行
        minSpareCols: 1, // 右方总是空一行
        className: 'htCenter',
        currentRowClassName: 'currentRow', //为选中行添加类名，可以更改样式
        currentColClassName: 'currentCol', //为选中列添加类名
        autoWrapRow: true, //自动换行
        language: 'zh-CN',
        fillHandle: true, //选中拖拽复制 possible values: true, false, "horizontal", "vertical"
        fixedColumnsLeft: 1, //固定左边列数
        fixedRowsTop: 1, //固定上边行数
        columns: [
          {}, // readOnly: true
          //添加每一列的数据类型和一些配置
          { type: 'numeric' }, //数值
          {
            type: 'dropdown',
            source: ['男', '女'],
            strict: false,
          },
          {
            type: 'date', //时间格式
            dateFormat: 'YYYY/MM/DD',
            correctFormat: true,
            defaultDate: '01/01/1900',
          },
          {
            type: 'dropdown', //下拉选择
            source: [
              '空腹血糖',
              '早餐2+小时血糖',
              '午餐2+小时血糖',
              '晚餐2+小时血糖',
            ],
            strict: false, //是否严格匹配
          },
          {
            type: 'dropdown',
            source: [
              '血压-利尿剂',
              '血压-β受体阻滞剂',
              '血压-钙通道拮抗剂(CCB)',
              '血压-血管紧张素抑制剂(ACEI)',
              '血压-血管紧张素二受体阻滞剂(ARB)',
              '血糖-双胍类药物（二甲双胍）',
              '血糖-磺脲类药物（格列美脲、格列齐特）',
              '血糖-噻唑烷二酮类药物（罗格列酮、吡格列酮）',
              '血糖-格列奈类药物（瑞格列耐、那格列耐）',
              '血糖-Ɑ糖苷酶抑制剂（阿卡波糖、伏格列波糖）',
              '血糖-DPP4抑制剂（沙格列汀、维格列汀）',
              '血糖-SGLT2抑制剂（达格列净）',
              '降血脂药物',
            ],
            strict: false,
          },
          {
            type: 'dropdown',
            source: ['1次', '2次', '3次', '4次'],
            strict: false,
          },
        ],
        colWidths: [170, 100, 100, 170, 170, 170, 70],
        manualColumnFreeze: false, //手动固定列
        manualColumnMove: false, //手动移动列
        manualRowMove: false, //手动移动行
        manualColumnResize: true, //手工更改列距
        manualRowResize: false, //手动更改行距
        customBorders: [], //添加边框
        columnSorting: false, //排序
        afterChange: this.afterChange, // 单元格改变后触发
        afterChange: (change, source) => {
          console.log(
            'afterChange:数据改变, change 是所改变单元格的属性，第一个是列的索引，第二个是数据的键，第三个是之前的值，最后一个是值',
            change,
            source
          )
        },
      },
    }
  },
  name: 'SampleApp',
  components: {
    HotTable,
  },
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.wrap {
  width: 100%;
  height: 100%;
}
</style>