diff --git a/src/components/TableModel2/index.vue b/src/components/TableModel2/index.vue index fb41d49..94f963e 100644 --- a/src/components/TableModel2/index.vue +++ b/src/components/TableModel2/index.vue @@ -81,6 +81,7 @@ @@ -203,6 +204,11 @@ export default { type: String, default: 'id', }, + // 单选框禁用判断的字段名(如果该字段值不为空,则禁用该行的单选框) + radioDisabledKey: { + type: String, + default: '', + }, // 测试时使用的数据源 testTableList: { type: Array, @@ -436,20 +442,25 @@ export default { if (res.code === 200) { this.tableList = res.rows this.total = res.total - // 数据刷新后,如果之前选中的行不在当前列表中,清空选中状态 + // 数据刷新后,如果之前选中的行不在当前列表中或被禁用,清空选中状态 if (this.isRadioShow && this.currentRowId) { let exists = false + let isDisabled = false for (let i = 0; i < this.tableList.length; i++) { const row = this.tableList[i] const uniqueId = this.getRowUniqueId(row, i) if (uniqueId === this.currentRowId) { exists = true - // 更新当前行数据引用 - this.currentRowData = row + // 检查该行是否被禁用 + isDisabled = this.isRadioDisabled(row) + if (!isDisabled) { + // 更新当前行数据引用 + this.currentRowData = row + } break } } - if (!exists) { + if (!exists || isDisabled) { this.currentRowId = null this.currentRowData = null } @@ -601,6 +612,10 @@ export default { // 处理单选框变化事件 handleRadioChange(row, index) { if (this.isRadioShow && row) { + // 如果该行被禁用,直接返回,不执行任何操作 + if (this.isRadioDisabled(row)) { + return + } const uniqueId = this.getRowUniqueId(row, index) // 只有当值真正改变时才更新,避免重复触发 if (this.currentRowId !== uniqueId) { @@ -611,9 +626,26 @@ export default { } }, + // 判断单选框是否禁用 + isRadioDisabled(row) { + // 如果没有设置禁用判断字段,不禁用 + if (!this.radioDisabledKey) { + return false + } + // 获取禁用判断字段的值 + const disabledValue = row[this.radioDisabledKey] + // 如果值为空(null、undefined、''),不禁选(返回 false) + // 如果不为空,则禁止选中(返回 true) + return disabledValue !== null && disabledValue !== undefined && disabledValue !== '' + }, + // 处理表格当前行变化(用于高亮) handleCurrentChange(currentRow) { if (this.isRadioShow && currentRow) { + // 如果该行被禁用,直接返回,不执行任何操作 + if (this.isRadioDisabled(currentRow)) { + return + } const index = this.tableList.findIndex(r => r === currentRow) const uniqueId = this.getRowUniqueId(currentRow, index) this.currentRowId = uniqueId @@ -688,6 +720,12 @@ export default { } } if (foundRow) { + // 如果该行被禁用,清空选中状态,不触发事件 + if (this.isRadioDisabled(foundRow)) { + this.currentRowId = oldVal + this.currentRowData = null + return + } this.currentRowData = foundRow this.$emit('radio-change', foundRow, foundIndex) } @@ -835,6 +873,20 @@ export default { height: 16px; } } + + // 禁用状态下的样式,确保无法点击 + &.is-disabled { + cursor: not-allowed; + pointer-events: auto; // 保持 pointer-events 以显示禁用状态 + + .el-radio__input { + cursor: not-allowed; + } + + .el-radio__label { + cursor: not-allowed; + } + } } // 表格样式优化 diff --git a/src/views/analysis/components/AnalysisBidDetail.vue b/src/views/analysis/components/AnalysisBidDetail.vue index 0f72dae..fc86fe1 100644 --- a/src/views/analysis/components/AnalysisBidDetail.vue +++ b/src/views/analysis/components/AnalysisBidDetail.vue @@ -79,7 +79,7 @@ ref="detailTableRef" :columnsList="detailColumnsList" :request-api="getBidListAPI" :sendParams="sendParams" :handleColWidth="180" :isRadioShow="true" @radio-change="handleRadioChange" :indexNumShow="false" :isShowtableCardStyle="false" - :radioKey="radioKey"> + :radioKey="radioKey" :radioDisabledKey="radioDisabledKey">