feat(grid): add tree-node button bubbling setting (#3570)

* feat: add tree-node button bubbling setting

* docs(grid): add tree-node button bubbling setting

* docs(grid): add tree-node button bubbling setting

* fix(grid): fix multi header right position error after insert dynamic column

examples/sites/demos/apis/grid.js

@@ -3502,6 +3502,8 @@ interface ITreeConfig {
   expandRowKeys?: string[]
   // 对于同一级的多个子节点，是否只能同时展开一个子节点
   accordion?: boolean
+  // 3.25.0版本新新增，当trigger为 'default' 时，点击按钮事件是否冒泡，默认为false
+  bubbling?: boolean
 }
       `
     },

examples/sites/demos/pc/app/grid/fixed/right-fixed-composition-api.vue

@@ -2,10 +2,10 @@
   <tiny-grid height="300" :data="tableData" :show-overflow="true">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称" width="600"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" width="500"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" width="600"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期" width="500"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期" width="600"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市右冻结" width="200" fixed="right"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市右冻结" width="600" fixed="right"></tiny-grid-column>
   </tiny-grid>
 </template>
 

examples/sites/demos/pc/app/grid/fixed/right-fixed.vue

@@ -2,10 +2,10 @@
   <tiny-grid height="300" :data="tableData" :show-overflow="true">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称" width="600"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数" width="500"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" width="600"></tiny-grid-column>
-    <tiny-grid-column field="createdDate" title="创建日期" width="500"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="创建日期" width="600"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市右冻结" width="200" fixed="right"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市右冻结" width="600" fixed="right"></tiny-grid-column>
   </tiny-grid>
 </template>
 

packages/vue/src/grid/src/cell/src/cell.ts

@@ -324,12 +324,14 @@ export const Cell = {
   renderTreeIcon(h, params) {
     let { $table, level, row } = params
     let { treeConfig, treeExpandeds } = $table
-    let { children, indent, renderIcon, trigger } = treeConfig
+    let { children, indent, renderIcon, trigger, bubbling } = treeConfig
     let isActive = ~treeExpandeds.indexOf(row)
     let rowChildren = row[children]
     let listeners = {
       click: (event) => {
-        event.stopPropagation()
+        if (!bubbling) {
+          event.stopPropagation()
+        }
         $table.triggerTreeExpandEvent(event, params)
       }
     }

packages/vue/src/grid/src/composable/useCellEvent.ts

@@ -220,10 +220,17 @@ export const useCellEvent = ({ table, $table }) => {
           satisfy(({ type }) => type === 'selection', selectConfig.trigger) ||
           satisfy(({ treeNode }) => treeNode, treeConfig.trigger))
       ) {
-        // 捕获阶段单元格进入编辑态，常显态的点击事件会被vue移除从而不会执行
+        const { bubbling, trigger } = treeConfig
-        fastdom.mutate(() => {
+        const isTreeNodeStopPropagation =
-          $table.triggerCellClickEvent(e, params)
+          !bubbling &&
-        })
+          (!trigger || trigger === 'default') &&
+          $table.getEventTargetNode(e, hoverCell.value, 'tiny-grid-tree__node-btn').flag
+        if (!isTreeNodeStopPropagation) {
+          // 捕获阶段单元格进入编辑态，常显态的点击事件会被vue移除从而不会执行
+          fastdom.mutate(() => {
+            $table.triggerCellClickEvent(e, params)
+          })
+        }
       }
 
       if (source.part === 'footer' && tableListeners['footer-cell-click']) {

packages/vue/src/grid/src/table/src/methods.ts

@@ -1004,7 +1004,9 @@ const Methods = {
     let scrollXLoad = scrollX && scrollX.gt && scrollX.gt < tableFullColumn.length
     let tableColumn = visibleColumn
 
+    // 对所有列的列宽进行分类：百分比/px
     Object.assign(columnStore, { leftList, centerList, rightList })
+    this.analyColumnWidth()
 
     showGroupFixedError({ isColspan, isGroup, leftStartIndex, rightEndIndex, visibleColumn })
 

packages/vue/src/grid/src/table/src/table.ts

@@ -535,8 +535,6 @@ export default defineComponent({
       value && this.$nextTick(this.recalculate)
     },
     tableColumn() {
-      // 对所有列的列宽进行分类：百分比/px
-      this.analyColumnWidth()
       // 处理空数据时表头是否禁用
       this.handleSelectionHeader()
     },