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

2022-02-24 22:04:04 阅读：322 来源： 互联网

需要用到的 “知识点” ：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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