怎么把字符串转换为element组件

Question

需求:

const str = "我是字符串, 里面有[日期]"
需要把[日期]字符串转化为element的日期组件

我用str.replace()方法转换的可以显示出来,但是一加v-model在字符串上就不显示了, 也不报错

datePicker = () => `
        <el-date-picker v-model="this.value"></el-date-picker>`
不显示了

datePicker = () => `
        <el-date-picker></el-date-picker>`
可以显示,但是不能选择日期

export default {
    data(){
        return {
            html: ""
        }
    }
    render(h) {
        const datepicker = () => `<el-date-picker></el-date-picker>`
        this.html = "我是字符串, 里面有[日期]"
            .replace(/\[.*?\]/g, datepicker)
        const component = Vue.extend({
            template: `<div class='emr-wrap'>${this.html}</div>`
        })
        return h(component, {})
    }
}

求助xdm, 应该怎么写

Answer 1

首先将 我是字符串, 里面有[日期] 转换为 ["我是字符串, 里面有", "日期"] 这种类型的一个数组。
再将数组里的元素渲染成组件，"我是字符串, 里面有"对应一个text组件，"日期"对应el-date-picker。
后面也可以扩展

Answer 2

可以参考下这个
https://codesandbox.io/s/dank...