iview 可编辑表格实现
第一步，定义：
第二步：设置列：
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);
},