原来你是这样的"layui"啊

1,，vue安装layui：

安装比较粗暴，直接下载官网的压缩包放在static文件夹下，在index中全局引用。

2，如果要使用layui一定要看文档，当然你要是没耐心可以边写边看文档，文档很详细。如果你用vue的话建议不要用layui。

遇到的问题：

(1) form中的radio，select，checkbox不能及时渲染；

      使用form.render();

(2)表单复选框中的全选：

 

a,通过“lay-filter”将复选框分组：

 <div class="layui-input-block">

   <input type="checkbox" name="plat" value="0" lay-skin="primary" lay-filter="plat" title="全部">

   <input type="checkbox" name="plat" value="1" lay-skin="primary" lay-filter="plat" title="iOS">

   <input type="checkbox" name="plat" value="2" lay-skin="primary" lay-filter="plat" title="android">

  <input type="checkbox" name="plat" value="3" lay-skin="primary" lay-filter="plat" title="其他">

</div>

b. 结合layui定义的复选框事件

 1 form.on('checkbox(filter)', function(data){
 2 
 3  var child = $(data.elem).siblings('input[type="checkbox"]');   //当前点击按钮的兄弟节点
 4 
 5   If(data.elem.checked){                 //是否被选中，true或者false
 6 
 7   if (data.value == "0") {             //当value==0是是全选状态
 8 
 9         message = [];
10 
11         child.each(function (index, item) {
12 
13           item.checked = data.elem.checked;
14 
15           message.push(item.value);
16 
17         });
18 
19    } else {
20 
21           message.push(data.value);
22 
23           if (message.length == num) {
24 
25              $(data.elem).parent().children("input").get(0).checked = true;
26 
27           }
28 
29         }
30 
31 }               
32 
33 });     

 

(3)复选框回显：

　　Initialize('sex', [1,2,3], 3);

 1   Initialize(type, message, count) {
 2 
 3         layui.use('form', function () {
 4 
 5           Let item = [];
 6 
 7           var form = layui.form,
 8 
 9             $ = layui.jquery;
10 
11 //         type 为input 的name值
12 
13           $('input[name=' + type + ']').each(function () {
14 
15             if (message[0] == 0 || message.length == count) {
16 
17               this.checked = true;
18 
19               itme.push(this.value);
20 
21             } else {
22 
23               for (let j = 0, l = message; j < l.length; j++) {
24 
25                 if (this.value == l[j]) {
26 
27                   this.checked = true;
28 
29                   itme.push(this.value);
30 
31                 }
32 
33               }
34 
35             }
36 
37             form.render();
38 
39           });
40 
41         });
42 
43 Return item;
44 
45       },

 

转载于:https://www.cnblogs.com/wxx-17-5-13/p/10288080.html