🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
render函数简单的用法 ~~~ template, 这里的item是遍历v-for = "item in items"的值, 传了两个参数item.name和item.id <Button type="primary" @click.stop="editBtn(item)">编辑</Button> js代码,这里render一个输入框 edit (e) { this.$Modal.confirm({ title: '编辑', closable: true, render: (h) => { return h('Input', { props: { value: e.name, placeholder: '请输入要修改名称' }, on: { input: (val) => { // this.value = val; console.log(this.value) } }, nativeOn: { change: (e) => { console.log(e.target) } }, }) }, onOk: () => { console.log(this.value) } }) } ~~~ #### **这里有个问题就是当我们使用v-for列表渲染的时候,当我们改变其中一个input的值的时候,其他input框不改的,它就会继承上一个input的值** #### 下面render一个输入框和select框 ~~~ // template 里的代码 <Button type="primary" @click.stop="editBtn(item)">编辑</Button> // js的代码 edit (e) { this.$Modal.confirm({ title: '编辑', closable: true, render: (h,params) => { return h('div',[ h('Input', { props: { value: e.name, autofocus: true, placeholder: '请输入要修改的试卷名' }, attrs:{ id: e.id }, style: { marginBottom: '10px' }, on: { input: (val) => { this.value = val } } }), h('Select', { props: { // value: e.examTime * 60 + "分钟", label: e.examTime * 60 + "分钟", placeholder: e.examTime * 60 + "分钟" }, on: { 'on-change': (val) => { this.selectValue = val; } } }, [ h('Option', { props: { value: '0.5' } }, '30分钟'), h('Option', { props: { value: '0.75' } }, '45分钟'), h('Option', { props: { value: '1' } }, '60分钟'), h('Option', { props: { value: '1.25' } }, '75分钟'), h('Option', { props: { value: '1.5' } }, '90分钟'), h('Option', { props: { value: '1.75' } }, '105分钟'), h('Option', { props: { value: '2' } }, '120分钟') ]) ]) }, onOk: () => { console.log(this.value) console.log(this.selectValue) } }) } ~~~ #### 这里的问题同上,就是改变其中一个值的时候,其他的值如果没有发生改变,那么就默认继承上一个值