在输入内容过程中匹配到下划线__后在表格中新增加对应的行,删除下划线后表格中对应的行删除
<template>
<div>
<div>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入内容"
@input="descInput"
v-model.lazy="textarea2">
</el-input>
{{textarea2}}
</div>
<el-button @click="add">添加</el-button>
<el-button @click="tijiao">提交</el-button>
<el-table :data="data">
<el-table-column prop="name" label="序号">
<template slot-scope="scope">
{{scope.$index + 1}}
</template>
</el-table-column>
<el-table-column prop="name" label="名称">
<template slot-scope="scope">
<el-input v-model="data[scope.$index].name"></el-input>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="scope">
<el-input v-model="data[scope.$index].age"></el-input>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="scope">
<el-button @click="deleteRow(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return {
data:[],
textarea2: '',
num: ''
}
},
methods:{
add(){
this.data.push({});
// this.num = this.data.length
},
deleteRow(index){
console.log(index)
this.data.splice(index,1);
},
tijiao() {
console.log(this.data)
}
},
computed: {
descInput() {
var str = this.textarea2
var num = str.split('__').length
// console.log('num::', num)
this.num = num - 1
}
},
watch: {
num: function(val, oldVal) {
console.log('num1::', val, oldVal)
if(val > oldVal) {
this.add()
} else {
this.deleteRow(val-1)
}
}
}
}
</script>
<style lang="scss" scoped>
textarea {
height: 100px;
width: 500px;
padding: 10px 10px;
color: #3a3a3a;
border-color: #dcdcdc;
}
</style>