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[];