VisActor / VTable

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
https://visactor.io/vtable
MIT License
1.57k stars 129 forks source link

[Bug]设置某些列单元格不可选中后,点击这些单元格,SELECTED_CLEAR 事件未触发 #2094

Open mzhang-eric opened 1 month ago

mzhang-eric commented 1 month ago

复现步骤:

  1. 打开官网示例 官网示例-选择单元格

  2. 使用如下代码

    let tableInstance;
    fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then(res => res.json())
    .then(data => {
    const columns = [
      {
        field: 'Order ID',
        title: 'Order ID',
        width: 'auto'
      },
      {
        field: 'Customer ID',
        title: 'Customer ID',
        width: 'auto'
      },
      {
        field: 'Product Name',
        title: 'Product Name',
        width: 'auto',
        // 设置单元格不可选中
        disableSelect: true,
      },
      {
        field: 'Category',
        title: 'Category',
        width: 'auto'
      },
      {
        field: 'Sub-Category',
        title: 'Sub-Category',
        width: 'auto'
      },
      {
        field: 'Region',
        title: 'Region',
        width: 'auto'
      },
      {
        field: 'City',
        title: 'City',
        width: 'auto'
      },
      {
        field: 'Order Date',
        title: 'Order Date',
        width: 'auto'
      },
      {
        field: 'Quantity',
        title: 'Quantity',
        width: 'auto'
      },
      {
        field: 'Sales',
        title: 'Sales',
        width: 'auto'
      },
      {
        field: 'Profit',
        title: 'Profit',
        width: 'auto'
      }
    ];
    
    const option = {
      records: data,
      columns,
      widthMode: 'standard',
      keyboardOptions: {
        selectAllOnCtrlA: true,
        copySelected: true
      },
      theme: VTable.themes.ARCO.extends({
        selectionStyle: {
          cellBorderLineWidth: 2,
          cellBorderColor: '#9900ff',
          cellBgColor: 'rgba(153,0,255,0.2)'
        }
      })
    };
    tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
    tableInstance.on('selected_cell', (...args) => alert('SELECTED_CELL'));
    tableInstance.on('selected_clear', (...args) => alert('SELECTED_CLEAR'));
    window['tableInstance'] = tableInstance;
    });
  3. 上述代码给 Product Name 列设置了单元格不可选中,监听了 selected_cell 和 selected_clear 事件

  4. 在表格上随意选中一个其他列的单元格,此时会有 selected_cell 的 alert 信息,然后再点击 Product Name 列的单元格,此时表格上不再有选中状态,但是 selected_clear 事件并未触发

期望此时可以触发 selected_clear 事件