vue+mintUI中picker的总结

总结:这里的原因应该是触发change事件中执行了给第二列赋值的函数,是在函数中用

voucherType[1].values=xxx进行赋值,一开始以为是这样赋值的原因,后来改为this.$refs.xxx.setSoltValues=xxx进行赋值,数据不会覆盖了,change事件中的值和实际选中的值是一一对应的,然后第一列的数据在初始化的时候默认选中第一个,第二列的展示的数据,根据监视第一列当前值的发生改变从而进行重新赋值,

 

第二列数据添加不上选中样式,picker中的change事件,初始化会执行三次,这是因为mintUI版本是2.2.13的问题,2.2.9不会有这个问你,但是回退之后别的不好用,所以没有回退版本

解决方法:这里在监视第一列发生数据改变之后,在结构渲染完之后再进行对第二列数据的赋值,用了vue本身的一个方法,

this.$nextTick(()=>{

//在这里赋值

})

之前自定义的函数赋值方法在函数中对第二列进行赋值,目前是返回筛选的数据,也就是函数有返回值,拿到返回值在进行赋值,这样不会因为函数执行顺序的原因导致赋值时机,在change事件中不对第二列进行赋值,这样就不会导致重复赋值进行覆盖的情况

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一个流行的前端JavaScript框架,而Element UI是一个基于Vue的桌面端UI组件库。Vue + Element UI可以帮助开发者快速构建具有美观、交互性和响应式的Web应用程序。 下面是一个Vue + Element UI的示例,实现了一个简单的表格和一个表单。在示例,我们首先安装Vue和Element UI,然后创建Vue实例,并在其引入Element UI组件,最后将Vue实例挂载到HTML页面上。 引用:以下是Vue + Element UI的示例[^1]: ```HTML <!DOCTYPE html> <html> <head> <title>Vue + Element UI</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> <el-form :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input-number v-model="form.age"></el-input-number> </el-form-item> <el-form-item label="性别"> <el-radio-group v-model="form.gender"> <el-radio label="male">男性</el-radio> <el-radio label="female">女性</el-radio> </el-radio-group> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </div> <script> new Vue({ el: '#app', data: { tableData: [{ name: '张三', age: 18, gender: 'male' }, { name: '李四', age: 22, gender: 'female' }], form: { name: '', age: '', gender: '' } }, methods: { submitForm() { alert(JSON.stringify(this.form)); } } }) </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值