vue 动态添加、修改、删除某一条数据

1.场景：最近需求多次出现要动态去增删改选中的一行数据，当只有一条数据时不让删除。故记录一波~

未操作：

 新增数据：

 删除第二条数据：

 2.实现：

 <div>
    <el-row :gutter="10" class="flex_middle row-item">
      <el-col :span="2"
        ><div class="center-text left-text input-">序号</div>
      </el-col>
      <el-col :span="10"> <div class="left-text">xxx1</div> </el-col>
      <el-col :span="4"> <div class="left-text">xxx2</div></el-col>
      <el-col :span="6"> <div class="left-text">权重</div> </el-col>
      <el-col :span="2" class="flex_space_around">
        <i class="blue el-icon-circle-plus" @click="addQueryClick()"></i>
      </el-col>
    </el-row>
    <el-row
      :gutter="10"
      class="flex_middle row-item"
      v-for="(item, index) in queryArr"
      :key="index"
    >
      <el-col :span="2"
        ><div class="center-text left-text input-text">
          {{ ++index }}
        </div></el-col
      >
      <el-col :span="10"
        ><el-input v-model="item.queryxxx1" placeholder="参数名称"></el-input
      ></el-col>
      <el-col :span="4">
        <el-input v-model="item.queryxxx2" placeholder="参数名称"></el-input>
      </el-col>
      <el-col :span="6"
        ><el-input v-model="item.queryExample" placeholder="参数示例"></el-input
      ></el-col>
      <el-col :span="2" class="flex_space_around"
        ><i
          class="el-icon-error blue"
          @click.prevent="removeQueryClick(item)"
        ></i
      ></el-col>
    </el-row>
</div>

<script>
export default {
  data() {
    return {
     queryArr: [
        {
          queryName: '',
          queryMust: '',
          queryExample: '',
          queryRemarks: ''
        }
      ]
    },
//-------------方法----------------
 methods: {
    // 添加
    addQueryClick() {
      this.queryArr.push({
        queryName: '',
        queryMust: 'must',
        queryExample: '',
        queryRemarks: ''
      })
    },
    // 删除
    removeQueryClick(item) {
      if (this.queryArr.length == 1) return false
      let index = this.queryArr.indexOf(item)
      if (index !== -1) {
        this.queryArr.splice(index, 1)
      }
    },
}