Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

1. Common configurations

hotSettings: {
        language: 'zh-CN'.// Language Settings
        licenseKey: 'non-commercial-and-evaluation'.// Hide copyright text
        width: 'auto'.// Table width
        height: '400'.// Scroll will appear after the table height is set
        data: Handsontable.helper.createSpreadsheetData(10.26), / / list initialized data (Handsontable. Helper. CreateSpreadsheetData (10, 26))
        startRows: 2.// Initializes the number of rows, valid if there is no data attribute (minRows is used if the value is smaller than minRows)
        startCols: 0.// Initialize the number of columns. The value takes effect when there is no data attribute (if the value is smaller than minCols, minCols will take precedence)
        minRows: 2.// Minimum number of rows (if the initialization data is smaller than this value, this value shall be used)
        minCols: 0.// Minimum number of columns (if the initialization data is less than this value, this value shall be used)
        minSpareCols: 0.// The minimum number of whitespace in a column
        minSpareRows: 0.// The minimum number of rows
        colHeaders: [].// Whether to display the list header, default true is A,B,C, etc., can be [' column 1',' column 2'] custom display
        rowHeaders: [].// Whether to display the row header, default is 1,2,3, etc., can be customized display [' row 1',' row 2']
        colWidths: 50./ / column width
        rowHeights: 80./ / line height
        rowHeaderWidth: 150.// Row header width
        dropdownMenu: false.// Table header display dropdown menu, you can customize display
        className: 'htCenter htMiddle'.// Cell text alignment (htLeft,htRight,htCenter)
        currentRowClassName: 'my-selectRow'.// Add a custom class name to the selected row
        currentColClassName: 'my-selectCol'.// Add a custom class name to the selected column
        autoWrapRow: true.// Does the text wrap automatically (if colWidths are not set)
        fixedRowsTop: 0.// The list starts at the top, fixing the number of rows (excluding the row header)
        fixedColumnsLeft: 0.// Set the number of columns (excluding the list header) starting from the left.
        fillHandle: true.// Enable drag and drop replication (true,false,'horizontal','vertical')
        contextMenu: { // Right-click the cell to display the menu
          items: {
            row_above: {
              name: 'Insert a line above'
            },
            row_below: {
              name: 'Insert a line here'
            },
            col_left: {
              name: 'Insert a column to the left'
            },
            col_right: {
              name: 'Insert a column to the right'
            },
            remove_row: {
              name: 'Remove this line'
            },
            remove_col: {
              name: 'Remove this column'
            },
            alignment: {
              name: 'Alignment'
            },
            make_read_only: {
              name: 'read only'
            },
            copy: {
              name: 'copy'
            },
            cut: {
              name: 'cut'
            },
            separator: Handsontable.plugins.ContextMenu.SEPARATOR,
            clear_custom: {
              name: 'Clear all cell data'.callback: function() {
                this.clear()
              }
           }
        }
     }
  },
Copy the code

2, encountered pit

1) When a table is nested in a dialog, the menu bar displayed by the right mouse button will be covered by the pop-up box, because the Z-index of the pop-up box is larger than the Z-index of the menu bar.

The solution is to change the z-index of the table as follows:

<style lang="scss">
.htContextMenu:not(.htGhostTable){
  z-index:3000! important; } </style>Copy the code

2) You cannot set the height of the list header or the vertical center of the row header

No solution has yet been found.

We may encounter more problems later, keep updating!