Vue.js 在v-for产生的表格中 点击其中一行中的按钮 在该行下方添加一行

Vue.js 在v-for产生的表格中 点击其中一行中的按钮 在该行下方添加一行
添加的那行背景不一样 在添加的那行再点击 继续添加一行 背景颜色不一样 相当于在行下面添加子集行 不同级别的子集背景颜色不一样

 <button id="add" v-on:click="add">新增参数+</button>
  <table >
       <!-- 设置表头 -->
      <thead>
        <tr>
          <th v-for="key in columns">
          {{key}}
         </th>
        </tr>
      </thead>
      <!-- 设置表格内部的内容 -->
      <tbody >
          <tr v-for="item in list" id="{{item.class}}">
            <td  id="td_1" >
              <span id="btn_11"><button id="btn_1" v-on:click="btn1($index)">x</button></span>
              <span ><button id="btn_2" v-if="item.type==='D'||item.type==='G'" v-on:click="btn2($index)" >+</button></span>
              </tr>
      </tbody>
     </table>
</template>

<script>
export default {
    data: function () {
    this.editing = false
    return {
      mockwrites: 'true',
      Columns: ['操作', '字段', '中文名', '字段类型', 'mock值', '备注'],
      list: [
        {wenzi: 'asd', name: '', mock: 'false', text2: 'asadasfaf', type: 'A', class: 'List-A'},
        {wenzi: 'asfasf', name: '入参', mock: '', text2: 'asadasfaf', type: 'D', class: 'List-A'},
        {wenzi: 'asasdasdas', mock: 'false', name: '真正的入参方法', text2: 'asadasfaf', type: 'A', class: 'List-A'},
        {wenzi: 'aasdasdasdd4', name: '', mock: '', text2: 'asadasfaf', type: 'G', class: 'List-A'},
        {wenzi: 'asd5', name: '', mock: '', text2: 'asadasfaf', type: 'A', class: 'List-A'},
        {wenzi: 'asdasdas4', name: '是否只读', mock: 'false', text2: 'asadasfaf', type: 'A', class: 'List-A'}
      ],
      options: [
      {text: 'string', value: 'A'},
      {text: 'number', value: 'B'},
      {text: 'boolean', value: 'C'},
      {text: 'object', value: 'D'},
      {text: 'array(string)', value: 'E'},
      {text: 'array(snumber)', value: 'F'},
      {text: 'array(object)', value: 'G'},
      {text: 'array(boolean)', value: 'H'},
      {text: 'array', value: 'I'}
      ],
      adds: [
      {value: 'A', class: 'List-A'},
      {value: 'B', class: 'List-B'},
      {value: 'C', class: 'List-C'},
      {value: 'D', class: 'List-D'},
      {value: 'E', class: 'List-E'}
      ]
    }
  },
 methods: {
    blur: function () {
      this.editing = false
    },
    edit: function () {
      this.editing = true
      this.$nextTick(function () {
        this.$refs.input.focus()
      })
    },
    mockwrite: function () {
      this.mockwrite = false
    },
    btn1: function ($index) {
      this.list.splice($index, 1)
    },
    btn2: function ($index) {
      // this.list.push({wenzi: ' ', name: '', mock: '', text2: ' ', type: 'A'})
      // this.list.$set($index + 1, {wenzi: ' ', name: '', mock: '', text2: ' '})
      this.list.splice($index + 1, 0, {wenzi: ' aaaa', name: '', mock: '', text2: ' ', type: 'A', class: 'List-B'})
    },
    btn3: function ($index) {
      this.list.splice($index + 1, 0, {wenzi: ' ', name: '', mock: '', text2: ' ', type: 'A', class: 'List-C'})
    },
    btn4: function ($index) {
      this.list.splice($index + 1, 0, {wenzi: ' ', name: '', mock: '', text2: ' ', type: 'A', class: 'List-D'})
    },
    btn5: function ($index) {
      this.list.splice($index + 1, 0, {wenzi: ' ', name: '', mock: '', text2: ' ', type: 'A', class: 'List-E'})
    },
    btn6: function ($index) {
      this.list.splice($index + 1, 0, {wenzi: ' ', name: '', mock: '', text2: ' ', type: 'A', class: 'List-F'})
    },
    add: function () {
      this.list.push({wenzi: ' ', name: '', mock: '', text2: ' ', type: 'A', class: 'List-A'})
    }
  }
    }
</script>

---

data中添加一个变量：index:0
循环中添加一个v-show='$index<=index'6
单击事件：每次点击都this.index++
至于样式就判断$index的奇偶性,绑定class吧

---------我没测试过，就提供了一个思路，第一次回复，不对勿怪