TonyGermaneri / canvas-datagrid

Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.
BSD 3-Clause "New" or "Revised" License
1.44k stars 187 forks source link

Hey guys, has anyone encountered this problem #572

Closed wyaoting closed 7 months ago

wyaoting commented 7 months ago

Expected behavior and actual behavior.

Normal display data

Steps to reproduce the problem.

This is my code

 props: {
        url: {
            type: String
        }
    },
    data() {
        return {
            loading: false,
            propsData: [],
            action: '',
            SheetNames: [],
            Sheets: []
        }
    },
    mounted() {
        this.canvasExcelInit()
    },
    computed: {},
    methods: {
        handleTagClick(item) {
            this.action = item
            // this.tabExcelView(this.Sheets[item]);
            grid.data = utils.sheet_to_json(this.Sheets[item])
        },
        tabExcelView(sheet) {
            const container = document.querySelector('#excel-element')
            const json = utils.sheet_to_json(sheet) //
            grid = CanvasDatagrid({
                parentNode: container,
                data: json,
                allowSorting: false, //禁用表头排序
                // fillCellCallback: this.fillCellCallback
                editable: false // 表示不使用表格编辑
            })
            const height = (this.$refs.excelContainerRef.clientHeight || 550) - 50
            grid.style.width = `100%` // 宽度为视口宽度
            grid.style.height = `${height}px` // 宽度为视口宽度
            // grid.setColumnWidth(0, 900)
            this.loading = false
        },
        fillCellCallback(val) {
            console.log(val, 'val---')
        },
        async canvasExcelInit() {
            this.loading = true
            const f = await fetch(this.url, { cache: 'no-store' })
            const arrayData = await f.arrayBuffer()
            const wb = await read(arrayData)
            this.SheetNames = wb.SheetNames
            this.action = wb.SheetNames[0]
            this.Sheets = wb.Sheets
            const sheet = wb.Sheets[wb.SheetNames[0]] // 这里取第 0 个 sheet
            this.tabExcelView(sheet)
            // this.propsData = json;
        }
    }
2D5B839F-00CC-450c-89AC-F9D247DC4C03

Very strange I just need to drag and drop the browser's visual window

F24772FA-6ED6-4bbb-B39B-825C80560FAD

Specifications like the version of the project, operating system, or hardware.