数组数据的增加和删除

描述与要求：

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

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

3、含动态属性数组：fruitPage

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

HTML

动态属性

<div class="double-names">
  <template v-for="(item, index) in fruitList">
    <template v-for="(field, sort) in fruitPage">
    	<div :key="('f'+index+sort)" class="line-4" v-if="operateType === 'update'">
    	<el-input v-model="item[field.filed]"></el-input>
      <i
      v-if="index === 0 && (sort === fruitPage.length - 1) && fruitList.length < addLimit"
      class="el-icon-circle-plus icons-plus"
      @click="handleOperate('fruitList','PLUS', item, index)"
      ></i>
      
      <i v-if="index === 0 && (sort === fruitPage.length - 1) && fruitList.length === addLimit" 
      class="el-icon-circle-plus icons-plus-jinzhi"></i>
      
      <i
      v-if="index !== 0 && (sort === fruitPage.length - 1)"
      class="el-icon-remove icons-remove"
      @click="handleOperate('fruitList','REMOVE', item, index)"
      ></i>
    </div>

    <span :key="'n'+index+sort" v-else class="detail-text">{{ item[item.field] }}</span>
    </template>
  </template>
</div>

字符型数组

<div class="double-names">
			<template v-for="(item, index) in dataList">
				<div :key="'d'+index" class="line-4" v-if="operateType === 'update'">
					<el-input v-model="dataList[index]"></el-input>

					<template v-if="index === 0">
						<i
								v-if="dataList.length < addLimit"
								class="el-icon-circle-plus icons-plus"
								@click="handleOperate('fruitList','PLUS', item, index)"
						></i>

						<i v-if="dataList.length === addLimit" 
						class="el-icon-circle-plus icons-plus-jinzhi"></i>
					</template>

					<i
						v-if="index !== 0"
						class="el-icon-remove icons-remove"
						@click="handleOperate('fruitList','REMOVE', item, index)"
					></i>
				</div>
				<span :key="'n'+index" v-else class="detail-text">{{ dataList[index] }}</span>
			</template>
</div>

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