vue使用render函数将文字里的数字替换成input框

1.后台接口返回的数据(举例子)

detail：今天是星期五，我考试考了{0}分，下次我要考{1}分

score:120,150

2.需要将score里的字符串替换到detail里

//请求接口
getAction(this.url.list, params).then((res) => {
        res.result.forEach((item) => {
          //将score转换成数组形式
          item.score = item.score.split(',')
          //进行转换将score里的分数替换到对应的detail里
          //正则(/\{(.+?)\}/g 
          let ress = item.detail.replace(/\{(.+?)\}/g, function (s, t) {
            // console.log(s, t)
            return item.score[t]
          })
          item.content = ress
          //在将score数组转换成字符串
          item.score = item.score.join(',')
        })
        // console.log(res)

        if (res.success) {
          this.dataSource = res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })

3.切换input

 <a-modal v-model="visible" title="编辑分数" @ok="handleOk" @cancel="remove">
      
      <p v-if="flag == index">
      //封装的render函数子组件（和正常封装子组件相同）
      <input-text :text="list" :score="score" @message="input" @blur="blur"></input-text>
      </p>
      //点击显示input
      <p @click="changestr($event)" v-else>
          {{ detail }}
      </p>
 </a-modal>   





//切换为input
    changestr(e) {
      this.flag = this.index
      console.log(this.nowdetail[this.index])
   //因为detail里的数据是{0} 到render函数里map后就成了
       "我"，"考","试","考","了","{","0","}"  字符串 所以转成a
      let ress = this.nowdetail[this.index].replace(/\{(.+?)\}/g, function (s, t) {
        return 'a'
      })
      console.log(ress)
      let that = this
      //然后把a转换成分数就变成了
         "我"，"考","试","考","了","120"
      let arr = ress.split('').map(function (i, d) {
        // console.log(i, d);
        if (i == 'a') {
          return that.score[that.num++]
          // console.log(d)
        } else {
          return i
        }
      })
      
      this.list = arr
    },

4.在子组件里删除<template></template>

如果不执行上一步 map循环后的是

"我","考","试","考","了","1","2","0","分"，"下","次","我","要","考","1","5","0","分"一个一个的字符串

替换出来的value:d不会正确 

//注意一定不能写template
<script>
export default {
  //接受传递的数据
  props: ['text', 'score'],
  name: 'inputText',
  data() {
    return {
    }
  },
  render(h) {
    let that = this
    if (that.text!='') {
      return h(
        'div',
        {},
        //map循环将对应的120，150替换成input框 
        that.text.map((d) => {
          if (
            that.score.find(function (t) {
              return t === d
            })
          ) {
            return h('input', {
              //相当于给input上的属性
              attrs: {
                id: 'text',
                class: 'text',
                //这个就可以直接使用d 因为map出来的字符串 是 "120"而不是"1","2","0"
                value: d,
                maxlength: '3',
                autofocus: true,
              },
              //input框的监听事件
              on: {
                input: that.change,
                blur: that.blur,
              },
            })
          } else {
            return d
          }
        })
      )
    }
  },
  methods: {
    change(e) {
      let target = e.target
      let nodeList = e.target.parentNode.children
      let targetIndex = this.tabIndex(target, nodeList)
      this.$emit('message', { value: e.target.value, index: targetIndex })
    },
    blur() {
      this.$emit('blur')
    },
    //获取下标
    tabIndex(target, nodeList) {
      for (let i = 0; i < nodeList.length; i++) {
        if (target === nodeList[i]) {
          return i
        }
      }
    },
  },
}