网站域名哪些后缀更好,学院网站建设需求分析目录,光触媒网站建设,从化做网站建设一、效果图 图一#xff1a;校验效果 二、主要代码
注意#xff1a;
1、form 与 table 绑定的是同一个数据 tableSource 并且是一个数据#xff08;ElementUI 需要 对象包数组#xff09;
2、form用的是 name 绑定 - :name[index, vlan_id]
3、form-i… 一、效果图 图一校验效果 二、主要代码
注意
1、form 与 table 绑定的是同一个数据 tableSource 并且是一个数据ElementUI 需要 对象包数组
2、form用的是 name 绑定 - :name[index, vlan_id]
3、form-item 总要需要加上 rules - :rulesrules.blur
a-form reftableFormRef :modeltableSource :label-col{ style: { width: 10px } } :wrapper-col{ span: 0 } :rulesrulesa-tableclassant-table-stripedbordered:dataSourcetableSource:columnstableColumns:paginationfalse:scroll{ x: 1260 }:row-class-name(_record, index) (index % 2 1 ? table-striped : null)template #bodyCell{ column, text, record, index }template v-ifcolumn.dataIndex vlan_ida-form-item classcustom-form-item label :name[index, vlan_id] :rulesrules.blura-input stylewidth: 100% v-model:valuerecord[column.dataIndex]/a-input/a-form-item/template/template/a-table
/a-form 1、template
div classbottom-boxdiv classtitle-boxp classorder-title工单操作/pa-button stylemargin: 0 0 10px 0px typeprimary sizesmall clickhandleRowAdd增加行/a-button/divdiv classtable-boxa-form reftableFormRef :modeltableSource :label-col{ style: { width: 10px } } :wrapper-col{ span: 0 } :rulesrulesa-tableclassant-table-stripedbordered:dataSourcetableSource:columnstableColumns:paginationfalse:scroll{ x: 1260 }:row-class-name(_record, index) (index % 2 1 ? table-striped : null)template #bodyCell{ column, text, record, index }template v-ifcolumn.dataIndex vlan_ida-form-item classcustom-form-item label :name[index, vlan_id] :rulesrules.blura-input stylewidth: 100% v-model:valuerecord[column.dataIndex]/a-input/a-form-item/templatetemplate v-else-ifcolumn.dataIndex clouda-form-item classcustom-form-item label :name[index, cloud] :rulesrules.clouda-select stylewidth: 100% v-model:valuerecord[column.dataIndex] changehanlePlatformChange(index)a-select-option v-foritem in platforms :valueitem.value :keyitem.value{{ item.label }}/a-select-option/a-select/a-form-item/templatetemplate v-else-ifcolumn.dataIndex related_poola-form-item classcustom-form-item label :name[index, related_pool] :rulesrules.relatedPoola-select stylewidth: 100% v-model:valuerecord[column.dataIndex]a-select-option v-foritem in platform[index].children :valueitem.value :keyitem.value{{ item.label }}/a-select-option/a-select/a-form-item/templatetemplate v-else-ifcolumn.dataIndex allocated || column.dataIndex purpose || column.dataIndex vlan_domaina-form-item classcustom-form-item label :name[index, column.dataIndex] :rulesrules.changea-select stylewidth: 100% v-model:valuerecord[column.dataIndex]a-select-option v-foritem in column.list :valueitem.value :keyitem.value{{ item.label }}/a-select-option/a-select/a-form-item/templatetemplate v-else-ifcolumn.dataIndex operationa-button stylemargin: 0 5px typeprimary sizesmall clickhandleRowDel(index) danger删除/a-button/templatetemplate v-elsea-input stylewidth: 100% v-model:valuerecord[column.dataIndex]/a-input/template/template/a-table/a-form/divdiv classbtn-boxa-button v-ifsendFail stylemargin: 0 5px clickhandleCancleApply取消申请/a-buttona-button stylemargin: 0 5px typeprimary clickhandleSubmit提交/a-button/div
/div 2、script
script setup
import { h, reactive, ref } from vue;// 路由跳转
import { useRouter } from vue-router;
const { currentRoute } useRouter();
const router useRouter();const tableFormRef ref(); // form标签/**** 表格数据*/
let tableSource ref([]);// 校验规则
const rules {blur: [{ required: true, message: 请输入, trigger: blur }],change: [{ required: true, message: 请选择, trigger: change }],cloud: [{ required: true, message: 请选择所属平台, trigger: change }],relatedPool: [{ required: true, message: 请选择硬件资源池, trigger: change }]
};// 提交申请
const handleSubmit () {let params {};if (tableSource.value.length 0) {return message.error(工单不能为空);}// form的校验方法tableFormRef.value.validate().then(() {const tableSourceParams JSON.parse(JSON.stringify(tableSource.value));params {...formState, // 其他的参数status: 1,deviceLists: tableSourceParams};// 接口submitOrder(params).then(res {if (res.code 8200) {cancelId.value res.data.id;if (res.data.status 3) {message.success(二级VLAN地址入网添加成功);router.push({path: /network-access/vlan});} else if (res.data.status 2) {message.error(failTip(res.data.errorMessage));sendFail.value true;// if (route.query.id) {// echoDate();// }}}});});
};
/script
