Mint UI组件库CheckList使用及踩坑总结_vue.js_脚本之家

Import

import { Checklist } from 'mint-ui';Vue.component(Checklist.name, Checklist);

在开发过程中,我们肯定遇到过这样的问题,如下图所示:

   export default { name: 'app', data () { return { //存放所选选项value:[],//checklist设置options : [{ label: '选项A', value: 'A', disabled: true//可以禁用选项},{ label: '选项B', value: 'B', disabled: true},{ label: '选项C', value: 'C'},{ label: '选项D', value: 'D'}] } }, mounted:function(){ }} 

   export default { name: 'app', data () { return { //存放所选选项value:[],//checklist设置options : [{ label: '选项A', value: 'A'},{ label: '选项B', value: 'B'},{ label: '选项C', value: 'C'},{ label: '选项D', value: 'D'}] } }, mounted:function(){ }, methods:{ checkon: function(){ console.log } }} 

全局导入:全局导入后不用再导入

示例

npm installnpm run dev
 export default { name: 'app', data () { return { value: [], questionName: '多选标题1', options: [{ label: '玩具1', remark: '', seq: 1, value: '2ea0bbe02e024b76aa0180d5332a2d68' }, { label: '玩具2', remark: '', seq: 1, value: '2ea0bbe02e024b76aa0180d5332a2d69' }, { label: '玩具3', remark: '', seq: 1, value: '2ea0bbe02e024b76aa0180d5332a2d70' }] } }, methods: { checkon  { console.log } }}

demo链接:mint-ui-checklist_Mint UI组件库CheckList使用及踩坑总结_vue.js_脚本之家。jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

importMintfrom'mint-ui'import'mint-ui/lib/style.css'Vue.use;

API

只需在change事件中加$event, 然后打印参数就是合适的,如图

我选择了两个选项,但是v-model中绑定的数组只有一个,解决这个问题如下代码

相关文章

发表评论