<script setup lang="ts">
import type { FormInstance } from 'element-plus'
const configuretion_form = reactive({
serialport_name: '',
slave_count: 1,
run_switch_value: false
})
const configuretion_form_ref = ref()
const configuretion_form_rules = {
serialport_name: [{
required: true,
message: '需要选择一个串口',
trigger: 'change'
}]
}
async function run_switch_click(formEl: FormInstance | undefined) {
if (!formEl) return
formEl.validate(async valid => {
// 验证失败
if (!valid) {
console.log('验证失败')
configuretion_form.run_switch_value = false
return
}
console.log('验证成功')
})
}
const serialport_name_table = Array.from({ length: 10000 }).map((_, idx) => ({
value: `${idx + 1}`,
label: `${idx + 1}`,
}))
</script>
<template>
<el-container>
<el-aside>
<el-form ref="configuretion_form_ref" :model="configuretion_form" :rules="configuretion_form_rules"
:disabled="configuretion_form.run_switch_value" label-width="70px">
<el-form-item label="串口名" prop="serialport_name">
<el-select-v2 v-model="configuretion_form.serialport_name" :options="serialport_name_table" />
</el-form-item>
<el-form-item label="串口参数">
<el-text>9600bps 8n1 rtu</el-text>
</el-form-item>
<el-form-item label="从机数">
<el-input-number v-model="configuretion_form.slave_count" :min="1" :max="100" />
</el-form-item>
<el-form :model="configuretion_form" label-width="70px">
<el-form-item label="运行">
<el-switch v-model="configuretion_form.run_switch_value" @click="run_switch_click(configuretion_form_ref)" />
</el-form-item>
</el-form>
</el-form>
</el-aside>
<el-main>Main</el-main>
</el-container>
</template>
configuretion_form_rules 和 configuretion_form 里对应项的名字要一致,比如这里的 serialport_name文章来源地址https://uudwc.com/A/Pm3j8
文章来源:https://uudwc.com/A/Pm3j8