vue加element实现下拉框点击一行数据，文本框显示并嵌套数据

先看效果图
下拉框点击显示在文本框中

每点击下拉框，文本框都将数据嵌套进去

监测运算符是否已存在，如果存在则不显示运算符并提醒

代码

<template>
  <div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="110px"
      class="demo-ruleForm"
    >
      <el-form-item label="算法名称" prop="indexSystemName">
        <el-input size="small" v-model="ruleForm.indexSystemName"></el-input>
      </el-form-item>
      <el-form-item label="函数" prop="algorithmName">
        <el-select
          style="width: 233px"
          v-model="ruleForm.algorithmName"
          @change="handleChangea"
          size="small"
        >
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运算过程" prop="processs">
        <el-button type="primary" size="small" plain @click="operation('+')"
          >+</el-button
        >
        <el-button type="primary" size="small" plain @click="operation('-')"
          >-</el-button
        >
        <el-button type="primary" size="small" plain @click="operation('*')"
          >*</el-button
        >
        <el-button type="primary" size="small" plain @click="operation('/')"
          >/</el-button
        >
       
        <el-input
          type="textarea"
          size="small"
          v-model="ruleForm.process"
        ></el-input>

        <!-- <input type="textarea" name="" id="text" v-model="ruleForm.processss" /> -->

        <!-- <input
          type="textarea"
          name=""
          @blur="focuetext"
          id="text"
          v-model="ruleForm.processss"
        /> -->
        <span id="span"></span>
      </el-form-item>
    </el-form>

    <!-- <div class="Development_f_1">
      <h1 class="h1">确定指标理想值</h1>

      <div class="center-head">
        <span>综合监管指标</span>
        <span>资源环境承载能力</span>
      </div>
      <div id="mains" ref="mains" style="height: 400px"></div>
      <div>
        <div class="cardBox">
          <div class="headerBox" style="background-color: #4caf50">
            <p>
              <a
                title="查看详情"
                style="cursor: pointer; color: white"
                οnclick="viewXmInfo('${var.OMP_XM_ID}');"
                >项目名称一</a
              >
            </p>
          </div>
          <div class="bodyBox">
            <p>项目经理：成柯</p>
            <p>项目主管：王江</p>
            <p>
              项目状态：
              <a
                href="javascript:void(0)"
                class="label label-success"
                style="border-radius: 0.25em"
                >启动</a
              >
            </p>
            <p>异常状态：<span style="color: green">无异常</span></p>
            <p>加工量：1,817,375</p>
            <p>加工量：1,817,375</p>
            <p>加工量：1,817,375</p>
            <p>加工量：1,817,375</p>
            <p>加工量：1,817,375</p>
            <p>加工量：1,817,375</p>
            <p>加工量：1,817,375</p>
            <p>加工量：1,817,375</p>
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="card_wrap">
          <div class="card_item" v-for="item in add" :key="item.value">
            <div class="card_content">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        process: "",
      }, // 添加体系名称
      options: [
        {
          value: "sin",
          label: "正弦函数",
        },
        {
          value: "cos",
          label: "余弦函数",
        },
        {
          value: "tan",
          label: "正切函数",
        },
        {
          value: "asin",
          label: "反正弦函数",
        },
        {
          value: "atan",
          label: "反正切函数",
        },
        {
          value: "acos",
          label: "反余弦函数",
        },
        {
          value: "abs",
          label: "绝对值",
        },
        {
          value: "log",
          label: "自然对数函数值",
        },
        {
          value: "sqrt",
          label: "开平方函数",
        },
        {
          value: "round",
          label: "四舍五入",
        },
      ], //下拉框
      // ifRegistered: false, //用户已注册的提示语
      // verification: true, //修改用户名禁用
      // 表单判断
      rules: {
        // 表单验证规则
        indexSystemName: [
          { required: true, message: "请输入算法名称", trigger: "blur" },
        ],
        //  algorithmName: [
        //   { required: true, message: "请选择函数", trigger: "change" },
        // ],
        process: [
          { required: true, message: "请选择运算过程", trigger: "blur" },
        ],
      },
      processss: [],
      Symbol: "",
      oldvsl: "",
      // algorithmName:"",
    };
  },
  watch: {
    // algorithmName(v,o){
    //   this.oldvsl=o
    //   console.log(v,o,'监听');
    // }
  },
  components: {
    // ArrowHead,
  },
  methods: {
    //  点击
    handleChangea(val) {
      // console.log(val, this.ruleForm.process, "点击事件");
      // this.oldvsl=val
      this.wbk(val);
    },
    // 文本框赋值
    wbk(array) {
       if (array == "+" || array == "-" || array == "*" || array == "/") {
      
        let zf= this.ruleForm.process.charAt( this.ruleForm.process.length - 1);
         if (zf == "+" || zf == "-" || zf == "*" || zf == "/") {
        let arr = this.ruleForm.process + "";
        this.ruleForm.process = arr;
           this.$message({
              message: "已经选择了运算符，请选择指标变量!!!",
              type: "warning",
            });
          //  console.log(zf,zf == "+" || zf == "-" || zf == "*" || zf == "/",'已经选择了运算符，请选择指标变量!!!');
           return false
        }else{
           let arr = this.ruleForm.process + this.Symbol;
        this.ruleForm.process = arr;
          // console.log(zf,'继续下一步');
        }
        
      } else {
        let arr = array + "(" + this.ruleForm.process + ")";
        // let zf= this.ruleForm.process.charAt( this.ruleForm.process.length - 1);
// console.log(zf,'zkkf');
        this.ruleForm.process = arr;
      }
    },
    operation(value) {
      this.Symbol = value;
      this.wbk(value);
      // console.log(value);
    },
    focuetext() {
      if (document.getElementById("text").value == "") {
        document.getElementById("span").innerHTML = "请输入内容";
        document.getElementById("text").style.border = "solid 1px #F56C6C";
      } else {
        document.getElementById("span").innerHTML = "";
        document.getElementById("text").style.border = "solid 1px #fff";
      }
    },
  },

  mounted() {
    // this.quit();
  },
};
</script>
<style scoped>

</style>

代码有些乱，这个是我测试写的，实在没有时间来细细将测试的代码来好好码码了，不过复制粘贴可以实现功能，只需要你自己将这些代码理一下就好了，如有错误请指出，谢谢。