Mint UI组件库CheckList使用及踩坑总结

import { Checklist } from \'mint-ui\';

Vue.component(Checklist.name, Checklist);

importMintfrom\'mint-ui\'

import\'mint-ui/lib/style.css\'

Vue.use(Mint);

<template>
 <div id=\"app\">		
		<mt-checklist 
		v-model=\"value\" 
		:options=\"options\">
		</mt-checklist>
 </div>
</template>
 
< >
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(){
 	
 }
}
</ >
 
<style>
	
</style>

<template>
 <div id=\"app\">
		<mt-checklist 
			 =\"复选框列表\"
			v-model=\"value\" 
			align=\"right\"
			:options=\"options\" @change=\"checkon\">
		</mt-checklist>
		
 </div>
</template>
 
< >
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(this.value)
 	}
 }
}
</ >
 
<style>
	
</style>

npm install
npm run dev

<template>
  <mt-checklist : =\"多选标题\" v-model=\"value\" :options=\"item.options\" @change=\"checkon($event)\"></mt-checklist>
</template>

< >
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 (item) {
   console.log(item)
  }
 }
}
</ >