Handsontable vue如何实现在线编辑excal

Posted 2022-05-27 gqx-html

官网地址：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: ‘\\r\\n‘, // 允许您定义行分隔符。
        rowHeaders: true // 允许您使用行标题导出数据。
      )
    
  

</script>