关于表格span和input切换

Question

表格中平时显示是span 点击之后变为input

 <span v-if="!editing" @click="edit()" >{{item.wenzi}}</span>
   <input type="text" 
   v-el:input v-if="editing" 
   v-on:keyup.enter="blur()" 
   value="{{item.wenzi}}" 
   v-model="item.wenzi" >
                   
                   

 methods: {
    blur: function () {
      this.editing = false
    },
    edit: function () {
      this.editing = true
      this.$nextTick(function () {
        this.$els.input.focus()
      })
    },

Answer 1

模擬測試你的代碼，正常耶...
有什麼詳細的報錯嗎？

不過你有個地方寫錯了
v-on:keyup.enter="blur()" 應該改成 @blur="blur" 才會在失焦時變成 span

模擬

Answer 2

<template>
  <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>
              
            </td>
           
            <td id="b">
             
            <span v-if="!editing" @click="edit()">{{item.wenzi}}</span>
            <input type="text"
                   v-el:input
                   v-if="editing"
                   @blur="blur()" value="{{item.wenzi}}" v-model="item.wenzi"
                   >
                   <span> {{asd}}</span>
            </td>
             <td id="td_3" >
              <input  @blur="blur()" type="text"  value="{{item.name}}">
            </td> 
            <td id="td_4" > 
              <select v-model="item.type">
              <option v-for="option in options" v-bind:value="option.value" >
                <span>{{option.text}}</span> 
              </option>
            </select>    
              </td>
            <td id="td_5" >
              <input  @blur="blur()" type="text"  value="{{item.mock}}" v-model="item.mock" >
              <span v-on:click="mockwrite"  >{{item.mock}}-{{mockwrites}}</span>
             </td>
            <td id="td_6" >
              <input  type="text"  value="{{item.text2}}">
        </tr>

      </tbody>
     </table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    list: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    },
    adds: {
      type: Array,
      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.asd = this.$els.input
      this.$nextTick(function () {
        this.$els.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>