mirror of https://github.com/ElemeFE/element
Table: Add selectOnIndeterminate prop to control master checkbox behavior (#9924)
syn-zeta
杨奕
parent
741d5e6f24
commit
e36d57ac1d
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue