第一步,定义:
<Form ref="formItem" :model="formItem" :rules="formRules" :label-width="80">
<Button class="button" type="success" style="margin-left: 1099px;margin-bottom:10px;" @click="add">新增</Button>
<Table max-height="1000px" style="overflow: visible;margin-left:20px;" border stripe :columns="columns" :data="formItem.applyTasks">
<template slot-scope="{ row, index }" slot="partId" style="height:30px;">
<FormItem :prop="`applyTasks.${index}.partId`" :label-width="0" :rules="formRules.partId">
<Select v-model="formItem.applyTasks[index].partId" transfer class="itemClass" >
<Option v-for="item in parts" :key="item.dvalue" :value="item.id">
{{item.dvalue}}
</Option>
</Select>
</FormItem>
</template>
<template slot-scope="{ row, index }" slot="imageId">
<FormItem :prop="`applyTasks.${index}.imageId`" :label-width="0" :rules="formRules.imageId">
<Select v-model="formItem.applyTasks[index].imageId" transfer class="itemClass">
<Option v-for="item in images" :key="item.name" :value="item.id">
{{item.name}}
</Option>
</Select>
</FormItem>
</template>
<template slot-scope="{ row, index }" slot="netId">
<FormItem :prop="`applyTasks.${index}.netId`" :label-width="0" :rules="formRules.netId">
<Select v-model="formItem.applyTasks[index].netId" transfer class="itemClass">
<Option v-for="item in netZones" :key="item.dvalue" :value="item.id">
{{item.dvalue}}
</Option>
</Select>
</FormItem>
</template>
<template slot-scope="{ row, index }" slot="cpu">
<FormItem :prop="`applyTasks.${index}.cpu`" :label-width="0" :rules="formRules.cpu">
<Input v-model="formItem.applyTasks[index].cpu" class="itemClass"/>
</FormItem>
</template>
<template slot-scope="{ row, index }" slot="ram">
<FormItem :prop="`applyTasks.${index}.ram`" :label-width="0" :rules="formRules.ram">
<Input v-model="formItem.applyTasks[index].ram" class="itemClass"/>
</FormItem>
</template>
<template slot-scope="{ row, index }" slot="disk">
<FormItem :prop="`applyTasks.${index}.disk`" :label-width="0" :rules="formRules.disk">
<Input v-model="formItem.applyTasks[index].disk" class="itemClass"/>
</FormItem>
</template>
<template slot-scope="{ row, index }" slot="num">
<FormItem :prop="`applyTasks.${index}.num`" :label-width="0" :rules="formRules.num">
<Input v-model="formItem.applyTasks[index].num" class="itemClass"/>
</FormItem>
</template>
<template slot-scope="{ row, index }" slot="purpose">
<FormItem :prop="`applyTasks.${index}.purpose`" :label-width="0">
<Input v-model="formItem.applyTasks[index].purpose" class="itemClass"/>
</FormItem>
</template>
<template slot-scope="{ row, index }" slot="operation">
<Button style="margin-bottom:7px;" type="error" size="small" @click="handleDelete(index)">删除</Button>
</template>
</Table>
</form>
第二步:设置列:
columns:[
{
title: '区域',
slot: 'partId',
width: 150,
},
{
title: '镜像',
slot: 'imageId',
width: 200,
},
{
title: '网络域',
slot: 'netId',
width: 140,
},
{
title: 'CPU(核)',
slot: 'cpu',
width: 110,
},
{
title: '内存(G)',
slot: 'ram',
width: 110,
},
{
title: '硬盘(G)',
slot: 'disk',
width: 110,
},
{
title: '数量',
slot: 'num',
width: 110,
},
{
title: '用途',
slot: 'purpose',
width: 135,
},
{
title: "操作",
slot: "operation",
width: 80,
}
],
第三步:定义规则
formRules: {
partId:[
{required: true, message: "请选择区域", trigger: 'change'},
],
imageId:[
{required: true, message: "请选择镜像", trigger: 'change'},
],
netId:[
{required: true, message: "请选择网络域", trigger: 'change'},
],
cpu:[
{ required: true,message: '请输入CPU', trigger: 'blur' },
{ pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数', trigger: 'blur' },
],
ram:[
{ required: true, message: '请输入内存', trigger: 'blur' },
{ pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数', trigger: 'blur' },
],
disk:[
{ required: true,message: '请输入硬盘', trigger: 'blur' },
{ pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数', trigger: 'blur' },
],
num:[
{ required: true, message: '请输入数量', trigger: 'blur' },
{ pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数', trigger: 'blur' },
],
},
第四步:定义方法
add() {
const addData = {
id:"",
partId:"",
num:"",
imageId:"",
netId:"",
cpu:'',
ram:'',
disk:'',
purpose:'',
};
this.formItem.data.push(addData);
},
handleDelete(index){
if(this.formItem.applyTasks.length<=1){
Message.warning("请至少留一行,如果一行都不存在,添加行的方法会有问题!");
return false;
}
this.formItem.data.splice(index, 1);
},