表单控件内输入框的增删改查 vue3 + elementUI

//传参即自己需要的插入的文本
const insertTextAtCursor = (textToInsert) => {
// 输入框绑定事件，获取dom元素
  const editValueText = document.getElementById('myformulaText')

  if (!editValueText) return
     // 起始插入
  const startPos = editValueText.selectionStart
  const endPos = editValueText.selectionEnd

  const currentValueText = editValueText.value

  editValueText.value =
    currentValueText.slice(0, startPos) +
    textToInsert +
    currentValueText.slice(endPos, currentValueText.length)
   // 范围插入
  const newTextStartPos = startPos + textToInsert.length
  editValueText.setSelectionRange(newTextStartPos, newTextStartPos)

getMdObjPropCodes(editValueText.value)
 //回显数据
  entityForm.formulaText = editValueText.value
}

1. 插入根据光标事件 插入对应位置

const getMdObjPropCodes = (formulaText: any) => {
  const regex = /#(.*?)#/g;
  let match;
  let extractedLabels = [];
  while ((match = regex.exec(formulaText)) !== null) {
    extractedLabels.push(match[0])
  }

  let rearrangedSelectedObjProps = <any>[]
  extractedLabels.forEach((label) => {
    let matchingObj = selectedObjProps.value.find((obj:any) => obj.label === label)
    if (matchingObj) {
      rearrangedSelectedObjProps.push(matchingObj.code)
    }
  })

}

2. 筛选并匹配队形数据，因为是多规则匹配，我这里使用了正则，正则去获取想要的数据，每次变化时去调用一次 这个函数，即可筛选得到自己需要的数据。欢迎讨论~