Vue表格添加行

Question

我想点击 在点击的下面添加一行 而不是在固定位置添加一行

<tbody >
          <tr v-for="item in list" id="{{item.class}}">
            <td  v-for="key in columns" > 
              <span v-if="item[key+'editing']==='text'" @click="edit()" >{{item[key]}}</span>
              <input type="text"
                   v-if="item[key+'editing']==='input'"
                   @blur="blur()" value="{{item[key]}}" 
                   >
              <select v-model="item.type" v-if="item[key+'editing']==='selected'">
              <option v-for="option in options" v-bind:value="option.value" >
                <span>{{option.text}}</span> 
              </option>
            </select>
            <span v-if="item[key+'editing']==='add'">
              <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>
            </span>    
            </td> 
        </tr>

      </tbody>
     </table>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    list: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data: function () {
    // this.editing = false
    return {
      mockwrites: 'true',
      editing: 'text',
      Columns: ['操作', '字段', '中文名', '字段类型', 'mock值', '备注'],
      list: [
        {操作: '', 操作editing: 'add', 字段: 'asd', 字段editing: 'text', 中文名: 'assdda', 中文名editing: 'text', 字段类型: '', 字段类型editing: 'selected', type: 'A', mock值: 'false', mock值editing: 'tetx', 备注: 'asadasfaf', 备注editing: 'text', class: 'List-A'},
        {操作: '', 操作editing: 'add', 字段: 'asd', 字段editing: 'text', 中文名: 'assdda', 中文名editing: 'text', 字段类型: '', 字段类型editing: 'selected', type: 'B', mock值: 'false', mock值editing: 'tetx', 备注: 'asadasfaf', 备注editing: 'text', class: 'List-A'},
        {操作: '', 操作editing: 'add', 字段: 'asd', 字段editing: 'text', 中文名: 'assdda', 中文名editing: 'text', 字段类型: '', 字段类型editing: 'selected', type: 'C', mock值: 'false', mock值editing: 'tetx', 备注: 'asadasfaf', 备注editing: 'text', class: 'List-A'},
        {操作: '', 操作editing: 'add', 字段: 'asd', 字段editing: 'text', 中文名: 'assdda', 中文名editing: 'text', 字段类型: '', 字段类型editing: 'selected', type: 'D', mock值: 'false', mock值editing: 'tetx', 备注: 'asadasfaf', 备注editing: 'text', class: 'List-A'},
        {操作: '', 操作editing: 'add', 字段: 'asd', 字段editing: 'text', 中文名: 'assdda', 中文名editing: 'text', 字段类型: '', 字段类型editing: 'selected', type: 'E', mock值: 'false', mock值editing: 'tetx', 备注: 'asadasfaf', 备注editing: 'text', class: 'List-A'},
        {操作: '', 操作editing: 'add', 字段: 'asd', 字段editing: 'text', 中文名: 'assdda', 中文名editing: 'text', 字段类型: '', 字段类型editing: 'selected', type: 'A', mock值: 'false', mock值editing: 'tetx', 备注: 'asadasfaf', 备注editing: 'text', 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', btn: 'btn2'},
      {value: 'B', class: 'List-B', btn: 'btn3'},
      {value: 'C', class: 'List-C', btn: 'btn4'},
      {value: 'D', class: 'List-D', btn: 'btn5'},
      {value: 'E', class: 'List-E', btn: 'btn6'}
      ]
    }
  },
  methods: {
    // blur: function () {
    //   this.item[key + 'editing'] = 'text'
    // },
    // edit: function () {
    //   this.item[key + 'editing'] = 'input'
    // },
    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, {操作: '', 操作editing: 'add', 字段: '12345', 字段editing: 'text', 中文名: '是否', 中文名editing: 'text', 字段类型: '', 字段类型editing: 'selected', type: 'G', mock值: 'false', mock值editing: 'tetx', 备注: 'asadasfaf', 备注editing: 'text', class: 'List-A'})
    },
    add: function () {
      this.list.push({操作: '', 字段: 'asd', 中文名: 'assdda', 字段类型: '', mock值: 'false', 备注: 'asadasfaf', class: 'List-A'})
    }
  }
}

</script>

请输入代码

Answer 1

發現你傳遞的 $index 是錯誤的，你拿到的是 columns 的 index，改了下變成：

v-for="(itemIndex, item) in list"

在傳遞 itemIndex 就是了：

改過版本