Handsontable vue如何实现在线编辑excal

官网地址：https://handsontable.com/

1.实现效果

2.安装

import { HotTable } from '@handsontable/vue'

import Handsontable from 'handsontable'

 

3.页面引用

<template>
           <hot-table
                  ref="tableServer"
                  :data="hotSettings.dataList"                          // excal中的数据源
                  :context-menu="hotSettings.contextMenu"               // 右击鼠标可进行的操作
                  :col-headers="hotSettings.colHeaders"                 // 表格头部标题
                  :start-rows="hotSettings.startRows"                   // 默认固定行数
                  :start-cols="hotSettings.startCols"                   // 默认固定列数
                  :row-headers="hotSettings.rowHeaders"                 // 默认显示表格行头部
                  :row-heights="hotSettings.rowHeights"                 // 默认设置行高度
                  :manual-row-resize="hotSettings.manualRowResize"      // 
                  :manual-column-resize="hotSettings.manualColumnResize"
                  :manual-row-move="hotSettings.manualRowMove"
                  :columns="hotSettings.columns"
                  :before-remove-row="hotSettings.beforeRemoveRow"          // 删除行之前触发的事件
                  :after-create-row="hotSettings.afterCreateRow"            // 添加行后触发的事件                   //一定要记住所有的事件、数值一定要绑定在标签上才可使用，只在js的data中绑定是不可以的
                  :after-change="hotSettings.afterChange"                   // 新增行，动态改变值触发的事件
                  :id="`hotTableAll${$route.params.id}`"
                  class="table_hot"
                  license-key="non-commercial-and-evaluation"
                />
              </el-form-item>
              <el-button class="primary-button uploadButton"
                         size="small"
                         type="primary"
                         icon="el-icon-upload"
                         @click="uploadFile">导出</el-button>
</template>

<script>
import addressProvince from '@/components/addressProvince'
import { HotTable } from '@handsontable/vue'
import Handsontable from 'handsontable'
import { Message } from 'element-ui'
import priceList from '@/utils/priceList.js'

// 如果excal中有值为空，可拦截
const validatorList = (rule, value, callback) => {

  for (let i = 0; i < value.length; i++) {
    if (!value[i].region || !value[i].destination) {
      callback(new Error('请输入价格表中所有信息, 多余的可通过鼠标右击进行删除行'))
      return
    }
  }
  callback()
}
const riseWeightVal = function (value, callback) {
  if (/^d+(?=.{0,1}d+$|$)/.test(value) || value === '') {
    callback(true)
  } else {
    Message.error({
      message: '请输入数字'
    })
    callback(false)
  }
}

export default {
  components: {
    addressProvince,
    HotTable
  },
  data() {
    return {
      addressList: [{
        area: []
      }],
      hotSettings: {
        dataList: [],  //
        colHeaders: ['区域', '目的地', '首重 kg', '首重价格', '续重 kg', '续重价格'],
        startRows: 8,
        startCols: 6,
        rowHeaders: true,
        rowHeights: 40,
        manualRowResize: true,
        manualColumnResize: true,
        manualRowMove: true,
        customBorders: true,
        columns: [
　　　　　　//data: dataList数组中对应的 键，readOnly: 只读， type: 属于什么类型 例：text, numeric, validator: 数据验证
          { data: 'region', readOnly: false, type: 'text' },
          { data: 'destination', readOnly: false, type: 'text' },
          { data: 'firstWeight', readOnly: false, validator: riseWeightVal, allowInvalid: false },
          { data: 'firstWeightPrice', readOnly: false, validator: riseWeightVal, allowInvalid: false },
          { data: 'riseWeight', readOnly: false, validator: riseWeightVal, allowInvalid: false },
          { data: 'riseWeightPrice', readOnly: false, validator: riseWeightVal, allowInvalid: false }
        ],
        beforeRemoveRow: this.beforeRemoveRowMe,
        afterCreateRow: this.afterCreateRowMe,
        afterChange: this.afterChangeMe,
        contextMenu: {
          items: {
            'row_above': {
              name: '在此行上方插入行'
            },
            'row_below': {
              name: '在此行下方插入行'
            },
            'separator': Handsontable.plugins.ContextMenu.SEPARATOR,
            'copy': {
              name: '复制'
            },
            'undo': {
              name: '撤消'
            },
            'separator1': Handsontable.plugins.ContextMenu.SEPARATOR,
            'remove_row': {
              name: '删除行'
            },
            'clear_column': {
              name: '删除列'
            },
            'clear_custom': {
              name: '删除所有单元格',
              callback: function () {
                this.clear()
              }
            }
          }
        }
      },
      expressCompanyList: [],
      dateRange: [],
      typeBol: false,
      searchParam: {
        supplierServiceRegionPriceVos: []
      },
      searchParamRules: {
        supplierServiceRegionPriceVos: [
          { type: 'array', required: true, message: '请填写价格表', trigger: 'blur' },
          { validator: validatorList, required: true, message: '请输入价格表中所有信息, 多余的可通过鼠标右击进行删除行', trigger: 'blur' }
        ]
      },
      showContent: false,
      loadShow: false,
      saveLimit: false
    }
  },

  mounted() {
　　 this.hotSettings.dataList = this._.cloneDeep(priceList)

  },
  methods: {
    // 删除行之前调用
    beforeRemoveRowMe: function (changes, source) { // 数据改变时触发此方法
      this.hotSettings.dataList.splice(changes, source)
    },
    // 添加行
    afterCreateRowMe: function (changes) {
      this.hotSettings.dataList.splice(changes, 0, {
        region: '',
        destination: '',
        firstWeight: '',
        firstWeightPrice: '',
        riseWeight: '',
        riseWeightPrice: ''
      })
    },
    // 新增行时，动态改变值
    afterChangeMe: function (changes) {
      if (changes) {
        changes.forEach(([row, prop, oldValue, newValue]) => {
          console.log(oldValue)
          this.hotSettings.dataList[row][prop] = newValue
        })
      }
    },
    // 查看-excel不可编辑
    excalEdit() {
      this.hotSettings.columns.forEach(par => {
        par.readOnly = true
      })
    },
    definedShow() {
      this.showContent = true
    },
    saveSubmit() {

      // 防止点击多次触发
      if (this.saveLimit) return
　　　　conso.log()
      const that = this
      that.searchParam.supplierServiceRegionPriceVos = that.hotSettings.dataList
      const temp = that._.cloneDeep(this.searchParam)
      that.$refs.searchForm.validate((valid) => {
        if (valid) {
　　　　　　console.log(this.hotSettings.dataList)

          that.saveLimit = true
        }
      })
    },
    // 导出文件
    uploadFile() {
      // 可查看网址https://handsontable.com/docs/7.1.0/ExportFile.html
      const container = this.$refs.tableServer.hotInstance
      const exportPlugin = container.getPlugin('exportFile')
      exportPlugin.downloadFile('csv', {
        bom: 'UTF-8', // 允许您使用BOM签名导出数据。
        columnDelimiter: ',', // 允许您定义列分隔符。
        columnHeaders: false, // 允许使用列标题导出数据。
        exportHiddenColumns: true, // 允许您从隐藏列导出数据。
        exportHiddenRows: true, // 允许您从隐藏行导出数据
        fileExtension: 'csv', // 允许您定义文件扩展名。
        filename: '供应商服务价格表[YYYY]-[MM]-[DD]', // 允许您定义文件名。
        mimeType: 'text/csv', // 允许您定义MIME类型。
        rowDelimiter: '
', // 允许您定义行分隔符。
        rowHeaders: true // 允许您使用行标题导出数据。
      })
    }
  }
}
</script>