数组数据的增加和删除

描述与要求：

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;
}