From b2ab7fa6dffd4e1895572f23af29dd692ba662f7 Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Fri, 18 Jun 2021 19:01:44 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=A1=8C=E4=B8=BB=E9=94=AE?= =?UTF-8?q?=E4=B8=BA=200=20=E6=97=B6=E5=AF=BC=E8=87=B4=E9=87=8D=E6=96=B0?= =?UTF-8?q?=E7=94=9F=E6=88=90=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/App.vue | 13 +++++++----- examples/api/grid.ts | 2 +- examples/api/table.ts | 15 +++++++++++--- examples/views/table/base/Radio.vue | 24 ++++++++++++---------- packages/table/src/table.ts | 32 +++++++++++++++++++++-------- packages/table/src/util.ts | 2 +- packages/v-x-e-table/src/conf.ts | 7 ++++--- types/table.d.ts | 30 +++++++++++++++++---------- 8 files changed, 81 insertions(+), 44 deletions(-) diff --git a/examples/App.vue b/examples/App.vue index df8bf2c45..0db351757 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -491,7 +491,7 @@ export default defineComponent({ locat: { name: 'TableRadio' }, - keywords: ['radio'] + keywords: ['radio', 'radio-config'] }, { label: 'app.aside.nav.checkbox', @@ -499,7 +499,7 @@ export default defineComponent({ locat: { name: 'TableSelection' }, - keywords: ['checkbox'] + keywords: ['checkbox', 'checkbox-config'] }, { label: 'app.aside.nav.sort', @@ -1048,21 +1048,24 @@ export default defineComponent({ demoUrl: 'https://jsrun.pro/SWWKp/edit', locat: { name: 'TableEditManual' - } + }, + keywords: ['edit-config'] }, { label: 'app.aside.nav.click', demoUrl: 'https://jsrun.pro/4WWKp/edit', locat: { name: 'TableEditClick' - } + }, + keywords: ['edit-config'] }, { label: 'app.aside.nav.dblclick', demoUrl: 'https://jsrun.pro/KfWKp/edit', locat: { name: 'TableEditDBLClick' - } + }, + keywords: ['edit-config'] }, { label: 'app.aside.nav.selectContent', diff --git a/examples/api/grid.ts b/examples/api/grid.ts index 84e53610e..a51b66314 100644 --- a/examples/api/grid.ts +++ b/examples/api/grid.ts @@ -546,7 +546,7 @@ const apis = [ list: [ { name: 'commitProxy(code, ...arguments)', - desc: '给数据代理提交指令（支持额外的参数，对于很多特殊场景很有用）', + desc: '给数据代理提交指令（支持额外的参数，例如：手动调用触发查询、保存等方法）', version: '', type: '', enum: '', diff --git a/examples/api/table.ts b/examples/api/table.ts index ecdf60b28..88ac2945a 100644 --- a/examples/api/table.ts +++ b/examples/api/table.ts @@ -1190,9 +1190,18 @@ const apis = [ enum: '', defVal: '继承 setup.table.radioConfig', list: [ + { + name: 'strict', + desc: '严格模式，选中后不能取消', + version: '4.0.22', + type: 'Boolean', + enum: '', + defVal: 'true', + list: [] + }, { name: 'reserve', - desc: '是否保留勾选状态，对于某些场景下非常有用，比如数据被刷新之后还保留之前选中的状态（需要有 row-id）', + desc: '是否保留勾选状态，例如：数据被刷新或者分页之后还保留之前选中的状态（需要有 row-id）', version: '', type: 'boolean', enum: '', @@ -2836,7 +2845,7 @@ const apis = [ version: '', type: '', enum: '', - defVal: '{ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }', + defVal: '{ newValue, oldValue, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }', list: [] }, { @@ -2845,7 +2854,7 @@ const apis = [ version: '', type: '', enum: '', - defVal: '{ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }', + defVal: '{ newValue, oldValue, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }', list: [] }, { diff --git a/examples/views/table/base/Radio.vue b/examples/views/table/base/Radio.vue index 3beda2846..251263290 100644 --- a/examples/views/table/base/Radio.vue +++ b/examples/views/table/base/Radio.vue @@ -91,14 +91,15 @@ {{ demoCodes[5] }} -

使用 高亮方式，用户手动选中时会触发 事件

+

单选的默认行为是不允许取消的，可以通过设置 .=false 允许取消

+ @radio-change="radioChangeEvent4"> + @@ -246,8 +247,8 @@ export default defineComponent({ ] }) - const currentChangeEvent4: VxeTableEvents.CurrentChange = ({ rowIndex }) => { - console.log(`行选中事件 ${rowIndex}`) + const radioChangeEvent4: VxeTableEvents.CurrentChange = ({ newValue, oldValue }) => { + console.log(newValue, oldValue) } const demo5 = reactive({ @@ -287,7 +288,7 @@ export default defineComponent({ checkRadioMethod2, demo3, demo4, - currentChangeEvent4, + radioChangeEvent4, demo5, demo6, demoCodes: [ @@ -463,10 +464,11 @@ export default defineComponent({ ` + @radio-change="radioChangeEvent4"> + @@ -492,13 +494,13 @@ export default defineComponent({ ] }) - const currentChangeEvent4: VxeTableEvents.CurrentChange = ({ rowIndex }) => { - console.log(\`行选中事件 \${rowIndex}\`) + const radioChangeEvent4: VxeTableEvents.CurrentChange = ({ newValue, oldValue }) => { + console.log(newValue, oldValue) } return { demo4, - currentChangeEvent4 + radioChangeEvent4 } } }) diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts index 824dcd67c..2a5198545 100644 --- a/packages/table/src/table.ts +++ b/packages/table/src/table.ts @@ -4276,7 +4276,7 @@ export default defineComponent({ }) const ohterFields: (string | undefined)[] = [radioOpts.labelField, checkboxOpts.checkField, checkboxOpts.labelField, expandOpts.labelField] ohterFields.forEach((key) => { - if (key && !XEUtils.get(record, key)) { + if (key && eqEmptyValue(XEUtils.get(record, key))) { XEUtils.set(record, key, null) } }) @@ -4284,7 +4284,7 @@ export default defineComponent({ record[treeOpts.children] = null } // 必须有行数据的唯一主键，可以自行设置；也可以默认生成一个随机数 - if (!XEUtils.get(record, rowkey)) { + if (eqEmptyValue(XEUtils.get(record, rowkey))) { XEUtils.set(record, rowkey, getRowUniqueId()) } return record @@ -4316,7 +4316,7 @@ export default defineComponent({ const isLazy = treeConfig && treeOpts.lazy const handleCache = (row: any, index: any, items: any, path?: any, parent?: any) => { let rowid = getRowid($xetable, row) - if (!rowid) { + if (eqEmptyValue(rowid)) { rowid = getRowUniqueId() XEUtils.set(row, rowkey, rowid) } @@ -4845,17 +4845,31 @@ export default defineComponent({ * 单选，行选中事件 */ triggerRadioRowEvent (evnt, params) { - const isChange = reactData.selectRow !== params.row - tableMethods.setRadioRow(params.row) + const { selectRow: oldValue } = reactData + const { row } = params + const radioOpts = computeRadioOpts.value + let newValue = row + let isChange = oldValue !== newValue if (isChange) { - tableMethods.dispatchEvent('radio-change', params, evnt) + tableMethods.setRadioRow(newValue) + } else if (!radioOpts.strict) { + isChange = oldValue === newValue + if (isChange) { + newValue = null + tableMethods.clearRadioRow() + } + } + if (isChange) { + tableMethods.dispatchEvent('radio-change', { oldValue, newValue, ...params }, evnt) } }, triggerCurrentRowEvent (evnt, params) { - const isChange = reactData.currentRow !== params.row - tableMethods.setCurrentRow(params.row) + const { currentRow: oldValue } = reactData + const { row: newValue } = params + const isChange = oldValue !== newValue + tableMethods.setCurrentRow(newValue) if (isChange) { - tableMethods.dispatchEvent('current-change', params, evnt) + tableMethods.dispatchEvent('current-change', { oldValue, newValue, ...params }, evnt) } }, /** diff --git a/packages/table/src/util.ts b/packages/table/src/util.ts index 7761c1444..524a5d343 100644 --- a/packages/table/src/util.ts +++ b/packages/table/src/util.ts @@ -35,7 +35,7 @@ export function getRowkey ($xetable: VxeTableConstructor) { // 行主键 value export function getRowid ($xetable: VxeTableConstructor, row: any) { const rowId = XEUtils.get(row, getRowkey($xetable)) - return rowId ? encodeURIComponent(rowId) : '' + return XEUtils.eqNull(rowId) ? '' : encodeURIComponent(rowId) } export interface XEColumnInstance { diff --git a/packages/v-x-e-table/src/conf.ts b/packages/v-x-e-table/src/conf.ts index 29d354cf3..0e13b2cb8 100644 --- a/packages/v-x-e-table/src/conf.ts +++ b/packages/v-x-e-table/src/conf.ts @@ -29,9 +29,10 @@ const GlobalConfig: VXETableGlobalConfig = { // emptyRender: { // name: '' // }, - // radioConfig: { - // trigger: 'default' - // }, + radioConfig: { + // trigger: 'default' + strict: true + }, checkboxConfig: { // trigger: 'default', strict: true diff --git a/types/table.d.ts b/types/table.d.ts index 5e37c6199..24371f687 100644 --- a/types/table.d.ts +++ b/types/table.d.ts @@ -677,7 +677,12 @@ export interface TablePrivateMethods { triggerCheckRowEvent(evnt: Event, params: { row: any }, value: boolean): void; triggerCheckAllEvent(evnt: MouseEvent | null, value: boolean): void; triggerRadioRowEvent(evnt: Event, params: { row: any }): void; - triggerCurrentRowEvent(evnt: Event, params: VxeTableDefines.CurrentChangeParams): void; + triggerCurrentRowEvent(evnt: Event, params: { + $table: VxeTableConstructor & VxeTablePrivateMethods; + row: any; + rowIndex: number; + $rowIndex: number; + }): void; triggerRowExpandEvent(evnt: Event, params: VxeTableDefines.CellRenderBodyParams): void; triggerTreeExpandEvent(evnt: Event, params: VxeTableDefines.CellRenderBodyParams): void; triggerSortEvent(evnt: Event, column: VxeTableDefines.ColumnInfo, order: VxeTablePropTypes.SortOrder): void; @@ -743,7 +748,7 @@ export interface TableReactData { // 单选框属性，选中行 selectRow: any; // 表尾合计数据 - footerTableData:any[][]; + footerTableData: any[][]; // 展开列信息 expandColumn: any; hasFixedColumn: boolean; @@ -1126,7 +1131,7 @@ export namespace VxeTablePropTypes { }) => void | null | VNodeStyle); export type HeaderRowStyle = VNodeStyle | ((params: { - $table: & VxeTablePrivateMethods; + $table: VxeTableConstructor & VxeTablePrivateMethods; $rowIndex: number; fixed: VxeColumnPropTypes.Fixed; type: string; @@ -1287,6 +1292,7 @@ export namespace VxeTablePropTypes { }): boolean; trigger?: 'default' | 'cell' | 'row'; highlight?: boolean; + strict?: boolean; } export interface RadioOpts extends RadioConfig { } @@ -1488,9 +1494,9 @@ export namespace VxeTablePropTypes { * 只对 extendByCopy | extendByCalc 启用后有效，自定义单元格扩展区域赋值之后的方法 * @param params */ - afterExtendSetMethod?(params: { + afterExtendSetMethod?(params: { extendValues: any[][]; - } & VxeTableProDefines.ExtendCellAreaCalcBaseParams): boolean; + } & VxeTableProDefines.ExtendCellAreaCalcBaseParams): boolean; } export interface AreaOpts extends AreaConfig { } @@ -2131,17 +2137,19 @@ export namespace VxeTableDefines { export interface CutParams { } export interface CutEventParams extends TableEventParams, CutParams { } - export interface CurrentChangeParams { - row: any; - rowIndex: number; - $rowIndex: number; + export interface CurrentChangeParams extends TableBaseCellParams { + newValue: any; + oldValue: any; } export interface CurrentChangeEventParams extends TableEventParams, CurrentChangeParams { } - export interface RadioChangeParams extends TableBaseCellParams { } + export interface RadioChangeParams extends TableBaseCellParams { + newValue: any; + oldValue: any; + } export interface RadioChangeEventParams extends TableEventParams, RadioChangeParams { } - export interface CheckboxChangeParams { + export interface CheckboxChangeParams extends TableBaseCellParams { checked: boolean; records: any[]; reserves: any[];