mint-ui checklist
vue 2017-11-08 16:19:02

QAQ：在加入checklist的时候如果有一条横线，那不是border属性，background 背景图片，去掉即可

 

 

JavaScript Code复制内容到剪贴板
  1. import { Checklist } from 'mint-ui'  

 

示例：

1.jpg

init方法，ajax获取数据：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <mt-checklist title="选择课时" v-model="value" :options="options"></mt-checklist>  
  3. </template>  
  4.   
  5. <script>  
  6.     export default {  
  7.         name: 'teachPlanChooseLesson',  
  8.         data: function() {  
  9.             return {  
  10.                 value: [],  
  11.                 options: [], //预选项，为对象  
  12.             }  
  13.         },  
  14.         mounted() {  
  15.             this.init()  
  16.         },  
  17.         methods: {  
  18.             init() {  
  19.                 // 初始化 ,获取课时库列表  
  20.                 let params = {  
  21.                     pageNo: 1,  
  22.                     pageSize: 10,  
  23.                     user_id: this.$store.state.common.userId  
  24.                 };  
  25.                 this.request.post("远程url", params).then(response => {  
  26.                     let res = response.data;  
  27.                     if(res.code == 0) {  
  28.   
  29.                         if(!res.data) {  
  30.                             return false;  
  31.                         };  
  32.   
  33.                         let data = JSON.parse(res.data);  
  34.   
  35.                         let options = []; //自定义一个预选项用来拼接对象赋值给选择项中  
  36.                         data.forEach(function(item, index) {  
  37.                             options.push({  
  38.                                 "label": item.lessonName,  
  39.                                 "value": item.lessonId  
  40.                             });  
  41.                         });  
  42.                         this.options = options; //给checklist赋值  
  43.   
  44.                     } else {  
  45.                         this.$toast("获取课时列表失败");  
  46.                     }  
  47.                     // success callback      
  48.                 })  
  49.             }  
  50.         }  
  51.     }  
  52. </script>  

 

checklist赋值以后，目标：点击选择框给父层页面传输已选择的label 和 value，然后参考子父传值 ，将已选择的传给父层即可

XML/HTML Code复制内容到剪贴板
  1. <!--加一个change事件-->  
  2. <mt-checklist title="选择课时" v-model="value" :options="options" @change="renderParent($event)"></mt-checklist>  
  3.   
  4.             renderParent(val) {  
  5.   
  6.                 //console.log(val);  
  7.   
  8.                 //return false;  
  9.                 let selected = [];  
  10.                 let that = this;  
  11.   
  12.                 // 渲染父页面的已选择项  
  13.                 this.options.forEach(function(item) {  
  14.   
  15.                     if(val.indexOf(item.value) != -1) {  
  16.                         selected.push(item);  
  17.                     } else {  
  18.                         // 如果不存在，删除已选择中的数组  
  19.                         that.removeByValue(selected,item.value);  
  20.                     }  
  21.   
  22.                 });  
  23.   
  24.                 console.log(selected);  
  25.             },  
  26.             removeByValue(arr, val) {  
  27.                 // 查询value中是否有这个值，如果有就去除这个数组  
  28.                 for(var i = 0; i < arr.length; i++) {  
  29.                     if(arr[i].value == val) {  
  30.                         arr.splice(i, 1);  
  31.                         break;  
  32.                     }  
  33.                 }  
  34.             }  

 

 这里的this.value就是预勾选的值，可以在父层传一个数组过来，watch方法 如果有变法，就即时赋值

 

 

 

XML/HTML Code复制内容到剪贴板
  1. <input type="checkbox" class="mint-checkbox-input" :value="item.id" v-model="value">  

 

 

JavaScript Code复制内容到剪贴板
  1. import {Checklist} from 'mint-ui'  
  2.   
  3. export default {  
  4.     data: function () {  
  5.         return {  
  6.             value: []  
  7.         }  
  8.     },  
  9. }  

 

基础用法：

XML/HTML Code复制内容到剪贴板
  1. <mt-checklist  
  2.   title="复选框列表"  
  3.   v-model="value"  
  4.   :options="['选项A', '选项B', '选项C']">  
  5. </mt-checklist>  

 

设置禁用选项

XML/HTML Code复制内容到剪贴板
  1. <mt-checklist  
  2.   v-model="value"  
  3.   :options="options">  
  4. </mt-checklist>  
  5.   
  6.   
  7. <script>  
  8. this.options = [  
  9.   {  
  10.     label: '被禁用',  
  11.     value: '值F',  
  12.     disabled: true  
  13.   },  
  14.   {  
  15.     label: '选中禁用',  
  16.     value: '选中禁用的值',  
  17.     disabled: true  
  18.   },  
  19.   {  
  20.     label: '选项A',  
  21.     value: '值A'  
  22.   },  
  23.   {  
  24.     label: '选项B',  
  25.     value: '值B'  
  26.   }  
  27. ];  
  28. </script>  

设置最大可选数

XML/HTML Code复制内容到剪贴板
  1. <mt-checklist  
  2.   :max="2"  
  3.   v-model="value"  
  4.   :options="options">  
  5. </mt-checklist>  

选择框右对齐

XML/HTML Code复制内容到剪贴板
  1. <mt-checklist  
  2.   align="right"  
  3.   title="右对齐"  
  4.   v-model="value"  
  5.   :options="options">  
  6. </mt-checklist>  

 

API

参数 说明 类型 可选值 默认值
options 选择项，可直接传字符串数组或者对象数组 Array    
value 绑定值 Array    
title 标题，显示在列表上方 string    
max 最多可选个数，超过后其他未选择的选项变成禁用状态 Number    
align 复选框对其位置 String left, right left

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/191.html

上一篇 vue2.0 结合cookie使用
下一篇 mint-ui popup + 父子传值 + 子父传值
相关的文章
Powered by yoyo苏ICP备15045725号