数组数据的增加和删除

描述与要求：

1、数据的页面展示；满行或自动换行；可新增数据

2、删除操作至少保留一条数据，新增有最大长度限制

3、含动态属性数组：fruitPage

4、不含动态属性数组：字符串数组

HTML

动态属性

字符型数组

DATA

operateType: 'detail', // update
addLimit: 20,
fruitPage: [
{
name: '水果', filed: 'fruit', uiType: 'INPUT', desensitize: true, option: []
}
],
fruitList: [
{ fruit: '11'},
{ fruit: '22'},
{ fruit: '33'},
{ fruit: '11'},
{ fruit: '22'},
{ fruit: '33'},
{ fruit: '11'},
{ fruit: '22'},
{ fruit: '33'},
{ fruit: '11'},
{ fruit: '22'},
{ fruit: '33'},
{ fruit: '11'},
{ fruit: '22'},
{ fruit: '33'},
{ fruit: '11'},
{ fruit: '22'},
{ fruit: '33'}
],
fruitList: [
{ fruit: '11,22,33'},
],

JS

handleOperate(attr, type, item, index) {
let addData = this.clearObject(this[attr][0]);
switch (type) {
case 'PLUS':
this[attr].splice(index+1, 0, addData)
break;
case 'REMOVE':
this[attr].splice(index, 1);
break;
default:
break;
}
}
clearObject(obj){
Object.keys(obj).map(m => {
obj[m] = '';
})
}

CSS

.detail-main{
width: 100%;
}
.double-names{
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.line-4{
width: 24%;
margin: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
}
.icons-plus{
font-size: 16px;
color: green;
margin-left: 10px;
cursor: pointer;
}
.icons-plus-jinzhi{
font-size: 16px;
color: #dddddd;
margin-left: 10px;
}
.icons-remove{
font-size: 16px;
color: red;
margin-left: 10px;
cursor: pointer;
}