Vue利用文本域做一个批量添加选项功能

需要用到的 “知识点” ：

1、Element UI 的 Dialog 对话框

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

2、Element UI 的 Input 输入框

文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="textarea">
</el-input>

<script>
export default {
  data() {
    return {
      textarea: ''
    }
  }
}
</script>

3、Vue 文本域 多行输入时，逐行获取，渲染内容

我们在进行文本域输入时，很多情况会涉及到输入操作步骤，我们希望可以逐行获取，以数组形式提交到后端。当然从后端获取到数组形式的操作步骤时，可以按照逐行显示的方法显示在文本域中，那么具体怎么进行呢？

Step1: 搞清楚我们在文本域中敲击回车时，发生了什么
回车 => "\n"

以图片为例，文本域中的内容就可以表示为：“1、aaa\n2、bbb\n3、ccc” 这样一来，我们只需替换 \n 为一个常见的分隔符就好，这里用 “，” 举例，替换会用到下列自定义函数

    // 多行文本域内容逐行获取
    preText(pretext) {
      return pretext.replace(/\r\n/g, ",").replace(/\n/g, ",");
    },

Step2:  \n 替换完毕，接下来转换为数组

这时，我们的 “1、aaa\n2、bbb\n3、ccc” 就会转变为 “1、aaa，2、bbb，3、ccc” 到这里，JavaScript 学得不错的同学就应该都知道该怎么变为数组了。
没错，通过 JavaScript   split()  方法

("1、aaa,2、bbb,3、ccc").split(",");

Step3: 字符串转数组成功，然后该逆过程
我们从后端获取到数组形式的操作步骤时，可以按照逐行显示的方法显示在文本域中，其实也很简单，既然转数组的时候是字符串分割，那么数组转字符串，数组拼接不就完了嘛！我想这时候 JavaScript 学得不错的同学又应该知道该怎么办了。
JavaScript   join()  方法

“怎么样才能做到换行呢？”
“\n”
“所以，用 \n 拼接就完了嘛！”

that.TaskInfo.taskcontent = res.data.content.join("\n");

真实项目使用 ：

<template>
  <!-- 批量添加对话框开关 -->
  <div>
    <el-col>
      <el-form-item>
        <el-tooltip content="添加选项">
          <img
            src=""
            alt="添加选项"
            @click="addElement()"
            style="margin: 0 10px 0 30px"
          />
        </el-tooltip>

        <el-tooltip content="批量添加">
          <img src="" alt="批量添加" @click="batchAddVisible = true" />
        </el-tooltip>
      </el-form-item>
    </el-col>
    <!-- Dialog 对话框 -->
    <el-dialog
      class="batchAdd"
      title="标题文本"
      :visible.sync="batchAddVisible"
      width="30%"
    >
      <span>每行一个选项</span>
      <!-- Input 输入框 文本域 -->
      <el-input
        type="textarea"
        placeholder="请输入选项内容"
        v-model="textarea"
        :autosize="{ minRows: 5, maxRows: 20 }"
        @change="preText"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="batchAddVisible = false"
          >取 消</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="addElements(), (batchAddVisible = false)"
          >保 存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      batchAddVisible: false, // 控制批量添加对话框的显示
      textarea: "", // 批量添加文本域内容的绑定值
      preTextArray: [], // 批量添加文本域内容存储的数据
    };
  },
  methods: {
    addElement() {
      // 添加选项功能
      this.data.options.push({
        name: `选项${this.data.options.length + 1}`,
        value: this.data.options.length + 1,
        addInput: false,
      });
    },

    deleteElement() {
      // 删除元素
      this.data.options.splice(index, 1);
    },

    // 批量添加文本域 change 发生改变时触发的事件
    preText(pretext) {
      this.preTextArray = pretext
        .replace(/\r\n/g, ",")
        .replace(/\n/g, ",")
        .split(",");
    },

    addElements() {
      // 批量添加选项功能
      for (let i = 0; i < this.preTextArray.length; i++) {
        this.data.options.push({
          name: `${this.preTextArray[i]}`,
          value: this.data.options.length + 1,
          addInput: false,
        });
      }
      // 点击完保存按钮后需要清空文本域里的内容
      this.textarea = "";
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

标签：Vue,批量,添加,数组,文本,data,options,逐行
来源： https://blog.csdn.net/weixin_58099903/article/details/123107583