vue中动态匹配textarea中出现的下划线__

Question

在输入内容过程中匹配到下划线__后在表格中新增加对应的行，删除下划线后表格中对应的行删除

Answer 1

<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>

Answer 2

提个思路
1、watch或者input事件监听文本域中数据变化
2、在监听中使用split以下划线截取数据
3、截取后数组的长度就是下面表格绑定对象的长度

Answer 3

<template lang="pug">
textarea(v-model.lazy="str")

// 输入框自己写
</template>

<script>
export default {
  data() {
    return {
      str: '',
    };
  },  
  computed: {
    blanks() {
      return this.str.match(/_{2,}/g);
    }
  }
}
</script>

用 lazy 是希望不要刷新太多次，影响效率。

Answer 4

// html
<el-input
      type="textarea"
      :rows="4"
      placeholder="请输入内容"
      v-model="textarea"
      @change="textareaChange">
<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
        <template slot-scope="scope">
          <el-input v-model="scope.row.age"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      
export default {
    data: {
        textarea: '',
        tableData: []
    },
    methods: {
        textareaChange(value) {
          this.tableData = value.split('_').map(item => ({name: '', age: '', value: item}))
        },
        handleDelete(scope) {
          const {$index} = scope
          this.tableData.splice($index, 1)
        },
    }
}