Added contextmenu event for column header (#9475)

examples/docs/en-US/table.md

@@ -1990,6 +1990,7 @@ You can customize row index in `type=index` columns.
 | row-contextmenu | triggers when user right clicks on a row | row, event |
 | row-dblclick | triggers when double clicking a row | row, event |
 | header-click | triggers when clicking a column header | column, event |
+| header-contextmenu | triggers when user right clicks on a column header | column, event |
 | sort-change | triggers when Table's sorting changes | { column, prop, order } |
 | filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |

examples/docs/es/table.md

@@ -1993,6 +1993,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | row-contextmenu   | se dispara cuando el usuario hace clic derecho en una fila | row, event                        |
 | row-dblclick      | se dispara cuando se hace doble clic en una fila | row, event                        |
 | header-click      | se dispara cuando se hace click en una cabecera de columna | column, event                     |
+| header-contextmenu | se dispara cuando el usuario hace clic derecho en una cabecera de columna | column, event |
 | sort-change       | se dispara cuando el ordenamiento de la tabla cambia | { column, prop, order }           |
 | filter-change     | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters                           |
 | current-change    | se dispara cuando la fila actual cambia  | currentRow, oldCurrentRow         |

examples/docs/zh-CN/table.md

@@ -2050,6 +2050,7 @@
 | row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event |
 | row-dblclick | 当某一行被双击时会触发该事件 | row, event |
 | header-click | 当某一列的表头被点击时会触发该事件 | column, event |
+| header-contextmenu | 当某一当用户右击列标题时触发 | column, event |
 | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
 | filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |

packages/table/src/table-header.js

@@ -108,6 +108,7 @@ export default {
                       on-mouseout={ this.handleMouseOut }
                       on-mousedown={ ($event) => this.handleMouseDown($event, column) }
                       on-click={ ($event) => this.handleHeaderClick($event, column) }
+                      on-contextmenu={ ($event) => this.handleHeaderContextMenu($event, column) }
                       style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }
                       class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }>
                       <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
@@ -373,6 +374,10 @@ export default {
       this.$parent.$emit('header-click', column, event);
     },
 
+    handleHeaderContextMenu(event, column) {
+      this.$parent.$emit('header-contextmenu', column, event);
+    },
+
     handleMouseDown(event, column) {
       if (this.$isServer) return;
       if (column.children && column.children.length > 0) return;