Table: Add selectOnIndeterminate prop to control master checkbox behavior (#9924)

examples/docs/en-US/table.md

@@ -1946,7 +1946,7 @@ You can customize row index in `type=index` columns.
 
 ### Table Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
+|----------------|----------------------|-----------|-----------------------|----------|
 | data | Table data | array | — | — |
 | height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string/number | — | — |
 | max-height | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
@@ -1975,6 +1975,7 @@ You can customize row index in `type=index` columns.
 | sum-text | displayed text for the first column of summary row | String | — | Sum |
 | summary-method | custom summary method | Function({ columns, data }) | — | — |
 | span-method | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — |
+| select-on-indeterminate | Controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | Boolean | — | false |
 
 ### Table Events
 | Event Name | Description | Parameters |

examples/docs/es/table.md

@@ -189,7 +189,7 @@
         multipleSelection: []
       };
     },
-    
+
     methods: {
       getSummaries(param) {
         const { columns, data } = param;
@@ -213,7 +213,7 @@
             sums[index] = 'N/A';
           }
         });
-    
+
         return sums;
       },
       setCurrent(row) {
@@ -228,40 +228,40 @@
           this.$refs.multipleTable.clearSelection();
         }
       },
-    
+
       handleClick() {
         console.log('click');
       },
-    
+
       handleEdit(index, row) {
         console.log(index, row);
       },
-    
+
       handleDelete(index, row) {
         console.log(index, row);
       },
-    
+
       handleSelectionChange(val) {
         this.multipleSelection = val;
       },
-    
+
       handleCurrentChange(val) {
         this.currentRow = val;
       },
-    
+
       formatter(row, column) {
         return row.address;
       },
-    
+
       filterTag(value, row) {
         return row.tag === value;
       },
-    
+
       filterHandler(value, row, column) {
         const property = column['property'];
         return row[property] === value;
       },
-    
+
       tableRowClassName({row, rowIndex}) {
         if (rowIndex === 1) {
           return 'warning-row';
@@ -270,11 +270,11 @@
         }
         return '';
       },
-    
+
       deleteRow(index, rows) {
         rows.splice(index, 1);
       },
-    
+
       arraySpanMethod({ row, column, rowIndex, columnIndex }) {
         if (rowIndex % 2 === 0) {
           if (columnIndex === 0) {
@@ -284,7 +284,7 @@
           }
         }
       },
-    
+
       objectSpanMethod({ row, column, rowIndex, columnIndex }) {
         if (columnIndex === 0) {
           if (rowIndex % 2 === 0) {
@@ -300,12 +300,12 @@
           }
         }
       },
-    
+
       indexMethod(index) {
         return index * 2;
       }
     },
-    
+
     watch: {
       multipleSelection(val) {
         console.log('selection: ', val);
@@ -1978,6 +1978,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | sum-text               | texto a mostrar para la primer columna de la fila de resumen | String                                   | —                              | Sum                                      |
 | summary-method         | método personalizado para resumen        | Function({ columns, data })              | —                              | —                                        |
 | span-method            | método que devuelve _rowspan_ y _colspan_ | Function({ row, column, rowIndex, columnIndex }) | —                              | —                                        |
+| select-on-indeterminate | Controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | Boolean | — | false |
 
 ### Eventos de la tabla
 | Nombre del evento  | Descripción                              | Parámetros                        |

examples/docs/zh-CN/table.md

@@ -1684,7 +1684,7 @@
       label="数值 3">
     </el-table-column>
   </el-table>
-  
+
   <el-table
     :data="tableData6"
     border
@@ -2035,6 +2035,7 @@
 | sum-text | 合计行第一列的文本 | String | — | 合计 |
 | summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | — |
 | span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — |
+| select-on-indeterminate | Controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | Boolean | — | false |
 
 ### Table Events
 | 事件名 | 说明 | 参数 |

packages/table/src/table-store.js

@@ -107,7 +107,8 @@ const TableStore = function(table, initialState = {}) {
     hoverRow: null,
     filters: {},
     expandRows: [],
-    defaultExpandAll: false
+    defaultExpandAll: false,
+    selectOnIndeterminate: false
   };
 
   for (let prop in initialState) {
@@ -293,8 +294,12 @@ TableStore.prototype.mutations = {
   toggleAllSelection: debounce(10, function(states) {
     const data = states.data || [];
     if (data.length === 0) return;
-    const value = !states.isAllSelected;
     const selection = this.states.selection;
+    // when only some rows are selected (but not all), select or deselect all of them
+    // depending on the value of selectOnIndeterminate
+    const value = states.selectOnIndeterminate
+      ? !states.isAllSelected
+      : !(states.isAllSelected || selection.length);
     let selectionChanged = false;
 
     data.forEach((item, index) => {

packages/table/src/table.vue

@@ -306,7 +306,12 @@
 
       tooltipEffect: String,
 
-      spanMethod: Function
+      spanMethod: Function,
+
+      selectOnIndeterminate: {
+        type: Boolean,
+        default: true
+      }
     },
 
     components: {
@@ -618,7 +623,8 @@
     data() {
       const store = new TableStore(this, {
         rowKey: this.rowKey,
-        defaultExpandAll: this.defaultExpandAll
+        defaultExpandAll: this.defaultExpandAll,
+        selectOnIndeterminate: this.selectOnIndeterminate
       });
       const layout = new TableLayout({
         store,