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

添加的那行背景不一样 在添加的那行再点击 继续添加一行 背景颜色不一样 相当于在行下面添加子集行 不同级别的子集背景颜色不一样

新增参数+

{{key}}

x

+

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'})

}

}

}