表格中平时显示是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()
})
},
<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>
模擬測試你的代碼,正常耶...
有什麼詳細的報錯嗎?
不過你有個地方寫錯了v-on:keyup.enter="blur()"
應該改成 @blur="blur"
才會在失焦時變成 span