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)
}
})
}
~~~
#### 这里的问题同上,就是改变其中一个值的时候,其他的值如果没有发生改变,那么就默认继承上一个值
- mui框架
- toast提示框的使用
- 星级评分
- 上拉刷新和下拉加载里超链接失效的原因
- confirm确认框的使用
- 取消下拉刷新和上拉加载的border
- 解决使用加载的方式捕捉不到dom
- css样式篇
- css3实现0.5像素的边框
- css3样式中的border-radius的圆角边框
- css面试篇之红色十字架
- css样式~~用图片模拟单选框radio的功能
- div设置绝对定位以后,文字实现居中
- 设置input里面字体颜色和大小
- js知识篇
- javascript篇~~九九乘法表
- js~跳转提示页面
- js~实现60秒倒计时
- 正则表达式之保留小数点后两位小数
- 数组操作方法篇
- Array.prototype.filter()的用法
- 使用正则去除空格
- jQuery知识篇
- jQuery~~模仿radio图片切换
- 下拉菜单的滑动效果
- jQuery点击切换字体颜色
- jQuery实现图片和字体图标颜色的切换
- 左侧菜单之当前点击菜单展开,其他菜单收缩
- jQuery全选或全部不选
- 实现子菜单的收缩和展开
- 小程序
- 小程序~调用豆瓣api数据的问题
- 实现毫秒级倒计时
- 条件渲染-wx:if语句
- 实现两个页面共存
- wxss样式问题
- 修改按钮默认的border-radius
- 移动端
- 安卓底部按钮浮上来的解决方法
- excel(xlsx) to json
- vue
- 事件
- 某个元素的点击事件
- 阻止子事件的冒泡
- excel文件的导入功能(解析成json数据)
- iview框架
- render函数
- iview不支持键盘事件的解决方法
- 路由传参
- 搜索框template的基本写法
- watch监听
- 路由发生变化,数据没有更新?
- 动态组件
- 刷新组件
- 前端小功能
- 搜索框
- axios
- axios公共请求方法
- cookie的简单使用
- 微信扫码登录功能
- pc端微信扫码登录-内嵌网页版
- MongoDB
- 安装与配置
- 布局
- js判断打开是PC端还是移动端
- 自适应布局方案-视口布局
- js实现加密和解密的公共方法
- js实现正则表达式匹配的文字加上标签
- python
- 解决pip升级不成功的原因
- Django
- runserver 失败的原因