网站建设设计维片,企业网站开发主要职责,jsp怎么做网站的删除,茂南手机网站建设公司目录
需求背景#xff1a;
具体实现#xff1a;
模板代码#xff1a;
函数处理代码#xff1a;
代码讲解#xff1a; 需求背景#xff1a; 点击表格最左侧的复选框列#xff0c;选中当前表格行#xff0c;而且只允许选择一行#xff0c;选中一行后#xff0c;其…目录
需求背景
具体实现
模板代码
函数处理代码
代码讲解 需求背景 点击表格最左侧的复选框列选中当前表格行而且只允许选择一行选中一行后其他行自动禁用。若点击全选则默认选择表格第一行。 具体实现 模板代码 el-table:dataallTeststylewidth: 100%;selection-changehandleSelectionChange1el-table-column typeselection width85 :selectablehandleSelectable /el-table-column propertytopicName label测试试题 width250 /el-table-column propertysum label题目总数 width250 //el-tabletemplate #footerspan classdialog-footerel-button clickdialogFormVisible1 false取消/el-buttonel-button typeprimary clickSelectionTopic确认/el-button/span/template 函数处理代码 script langts setup
import { reactive, ref, watch } from vue
import { ElMessage } from element-plusinterface Topic {topicName: stringsum: number
}const allTest: Topic[] [{topicName: 抑郁程度测试A版,sum: 50,},{topicName: 抑郁程度测试B版,sum: 30,},{topicName: 抑郁程度测试C版,sum: 70,},{topicName: 心理健康测试A版,sum: 40,},{topicName: 心理健康测试B版,sum: 55,},
]// 记录选中的试题
const selectedRow refTopic | null(null)
// 最后确定的试题
const Selection1 refTopic()
// 监听表格变化
function handleSelectionChange1(val: Topic[]) {if (val.length 0) {selectedRow.value val[0]}else {selectedRow.value null}
}
// 通过判断 selectedRow.value 是否为 null 或者与当前行的 topicName 相等来确定是否可以选中该行
function handleSelectable(row: Topic) {return selectedRow.value null || selectedRow.value.topicName row.topicName
}
function SelectionTopic() {// 判断 selectedRow.value 是否存在来确定是否有选中的行。如果存在我们将这个选中的行数据赋值给 Selection1.value以便在其他地方可以使用该值if (selectedRow.value) {Selection1.value selectedRow.valuedialogFormVisible1.value false}else {ElMessage.warning(请选择试题)}
}
/script 代码讲解 selectedRow 是一个用于记录选中的试题的引用。在 handleSelectionChange1 方法中通过监听表格的选中事件当选中的行发生变化时将选中的第一行赋值给 selectedRow.value。handleSelectable 方法用于判断是否可以选中某一行。如果没有选中任何行则所有行都可选否则只有与当前选中行的 topicName 相同的行可选。为了禁用其他行SelectionTopic 方法是确认按钮的点击事件处理函数。在该方法中首先判断 selectedRow.value 是否存在即是否有选中的行。如果存在则将选中的行数据赋值给 Selection1.value并关闭对话框或表单通过 dialogFormVisible1.value false。如果不存在选中的行则弹出提示窗“请选择试题”通过使用 Element Plus 的 Message 组件。
