eta_front/src/views/datasheet_manage/components/SheetExcel.vue

<template>
  <div id="sheet-container">
  </div>
</template>

<script>
import { copyFit } from '@/utils/svgToblob.js';
import { initSheet } from '../common/option';
export default {
  props: {
    option: {
      type: Object,
      default: ''
    },
    sheetInfo: {
      type: Object,
      default: ()=>{}
    },
    limit: {
      type: Object,
      default: ()=>{
        return {disabled:false}
      }
    },
  },
  data() {
    return {
      sheetObj: {}
    }
  },
  methods: {
    init() {
      let optionData = this.option ? this.option : {};
      let callbackItems={updated:this.updateEmit}
      initSheet('sheet-container',optionData,this.sheetInfo,this.limit,callbackItems)
      setTimeout(() => {
        //获取sheet-container的宽度，设置更多操作的宽度
        //#luckysheet-icon-morebtn-div
        const sheetDom = document.querySelector('#sheet-container')
        const morebtn = document.querySelector('#luckysheet-icon-morebtn-div')
        morebtn && (morebtn.style.maxWidth = sheetDom.clientWidth - 70 +'px')
      }, 300);
    },
    copyDisable(e){
      // 变向的禁止复制
      // this.copyData()
      if(!this.limit.disabled) return
      if(e.target && e.target.getAttribute('data-type') &&  e.target.getAttribute('data-type').indexOf('lucksheet')){
        luckysheet.enterEditMode();
        // luckysheet.exitEditMode();
        return false
      }
    },

    // 单元格内的文字分段
    getCellContent(arr) {
      if(!arr||!arr.length) return ''
      let cellStr = ''
      arr.forEach(_ => {
        cellStr+=_.v.replace(/\r/,'').replace(/\n/,'')
      })

      return cellStr;
    },

    updateEmit(){
      this.$emit("updated")
    }
  },
  destroyed() {
    luckysheet.destroy();
  },
  mounted() {
    this.init();
    document.addEventListener('copy',this.copyDisable)
  },
  beforeDestroy(){
    document.removeEventListener('copy',this.copyDisable)
  }
}
</script>
<style scoped lang="scss">
#sheet-container {
  margin:0;padding:0;
  position:absolute;
  width:100%;left: 0px;top: 0;bottom:0px;
}

</style>

<style lang="scss">
  .luckysheet .toolbar {
    background: none;
    margin: 0;
    padding: 0;
  }
.luckysheet-input-box {
  z-index: 99999;
}
</style>