lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity

修复行主键为 0 时导致重新生成的问题

Browse Source
This commit is contained in:
xuliangzhan
2021-06-18 19:01:44 +08:00
parent c3dfbd522b
commit b2ab7fa6df
8 changed files with 81 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
examples/App.vue
View File

@@ -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',

2
examples/api/grid.ts
View File

@@ -546,7 +546,7 @@ const apis = [
list: [
{
name: 'commitProxy(code, ...arguments)',
desc: '给数据代理提交指令（支持额外的参数，对于很多特殊场景很有用）',
desc: '给数据代理提交指令（支持额外的参数，例如：手动调用触发查询、保存等方法）',
version: '',
type: '',
enum: '',

15
examples/api/table.ts
View File

@@ -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: []
},
{

24
examples/views/table/base/Radio.vue
View File

@@ -91,14 +91,15 @@
<pre-code class="typescript">{{ demoCodes[5] }}</pre-code>
</pre>
<p class="tip">使用 <table-api-link prop="highlight-current-row"/> 高亮方式，用户手动选中时会触发 <table-api-link prop="current-change"/> 事件</p>
<p class="tip">单选的默认行为是不允许取消的，可以通过设置 <table-api-link prop="radio-config"/>.<table-api-link prop="strict"/>=false 允许取消</p>
<vxe-table
border
highlight-current-row
height="300"
:radio-config="{strict: false}"
:data="demo4.tableData"
@current-change="currentChangeEvent4">
@radio-change="radioChangeEvent4">
<vxe-column type="radio" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
@@ -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({
`
<vxe-table
border
highlight-current-row
height="300"
:radio-config="{strict: false}"
:data="demo4.tableData"
@current-change="currentChangeEvent4">
@radio-change="radioChangeEvent4">
<vxe-column type="radio" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
@@ -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
}
}
})

32
packages/table/src/table.ts
View File

@@ -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)
}
},
/**

2
packages/table/src/util.ts
View File

@@ -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 {

7
packages/v-x-e-table/src/conf.ts
View File

@@ -29,9 +29,10 @@ const GlobalConfig: VXETableGlobalConfig = {
// emptyRender: {
// name: ''
// },
// radioConfig: {
// trigger: 'default'
// },
radioConfig: {
// trigger: 'default'
strict: true
},
checkboxConfig: {
// trigger: 'default',
strict: true

30
types/table.d.ts vendored
View File

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