下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法。
近期开发的项目中前端ui框架用的是Layui,数据渲染使用vue去渲染，当我用vue渲染表单控件的数据时，
会出现控件被禁用的情况，例如:select下拉等，于是去看文档，按照文档说的写了，结果然并卵，(￣▽￣)"。
搞了半天都没搞好。然后在百度搜索了vue的相关文档后菜解决了问题。
首先觉一个例子，如下面的一段代码：
var newVue({
el:"#app",
data:{
items:null},
mounted:function() {this.details();//这是layui的方法
form.render();
},
methods:{
details:function(){var _self = this;
$.ajax获取数据成功后进行表单重载
form.render();
}
}
});
上述代码按理来说应该没什么问题啊，但是vue渲染数据成功后layui的表单控件就是不能用，why？(；′⌒`)。
然后百度啊，谷歌啊，各种搜索引擎，终于解决了问题，O(∩_∩)O。看下面，
Vue updated生命周期函数：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
无论是组件本身的数据变更，还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更，都会触发虚拟 DOM 重新渲染和打补丁，并在之后调用 updated。
然后只需要在vue的updated里面重新再去走一下layui的表单重载就行了。
代码：
updated:function(){
layui.use(['form'], function(){
form.render();
}
}
就这样OK，完美解决。

	

最近开发中在做项目的后台管理系统。用的guns框架，框架自带的js是layui。自己写页面也不好换模板。就简单的使用layui进行开发了。
1、layui的js、css引入跳过。
2、layui的js开头定义：
首先统一的js语法开头layui.use();要用到什么组件自己添加，下面的示例是用到了jquery、ajax、form表单等组件；但ajax的写法有很多种可以自己写熟悉的语法格式，不强制使用它封装的ax。
layui.use(['form', 'admin', 'ax'], function () {var $ = layui.jquery;    var $ax = layui.ax;    var form = layui.form;
    var admin = layui.admin;
});
3、layui的表格生成，包括分页：
我使用的表格是在html页面，先定义表格，然后再js 初始化各个行
html代码：
class="layui-table" id="channelListTable"
lay-filter="channelListTable">
js代码：
1)、首先定义表格的全局变量：
var ChannelList = {tableId: "channelListTable"};
2)、访问后台路径，渲染表格(这里可以定义表格的大小，注意有个initColumn方法)
var tableResult = table.render({elem: '#' + ChannelList.tableId,    url: Feng.ctxPath + '/ChannelList/list',    page: true,    height: "full-158",    cellMinWidth: 100,    cols: ChannelList.initColumn()
});
3)、通过刚刚定义的表格的全局变量初始化行，也就是ChannelList.initColumn方法
ChannelList.initColumn = function () {    return [[
        {type: 'checkbox'},        {field: 'cId', sort: true, title: '设备id'},        {field: 'cName', sort: true, title: '设备名称'},
        {field: 'gdName', sort: true, title: '设备昵称'}
        ]]
这里对应的就是表格里的各个字段，field与后台的实体类命名相同即可。
总结：这种表格生成方法蠢得一批。完全用的html与js。框架自动生成表格。分页在后台用的LayuiPageInfo类封装，页面的分页也是和表格一起生成，这种自动生成方式在后面的开发中给我带来了很大的痛苦。如果需求变更，在页面中的样式有变更。表格的样式调整起来会非常麻烦，想到了以前jsp的好。现在虽然jsp的使用率正在降低但是其他的模板引擎正在兴起。最近也正好在学习thymeleaf。过几天再写一个thymeleaf的学习笔记。
4、layui的特色，render方法：
在没有学过layui的情况下，来使用它遇到好多坑 ，最坑的应该就是render方法了，layui的组件，无论什么组件写完后都需要render一下，举个例子：
在页面加载完成后需要在form表单里动态生成一个select组件。生成代码后就需要render下表单，生成的数据才会显示。否则。具体方法看截图
form.render('select');渲染select框
同样的意思form.render('checkbox');渲染多选框
5、form表单的验证，这个用起来还是挺方便的：
话不多说，直接举例
html代码：
class="layui-input-block">
  id="username" name="username"  type="text" class="layui-input"
lay-verify="required|username" required/>
注意lay-verify。
js代码：
form.verify({username:function(value){var flag;        $.ajax({url:Feng.ctxPath +'/subUserList/checkUsername',            data:{"username":value},            dataType:"json",            async:false,            success:function (data) {if(data.flag == false || data.flag == 'false'){
                    flag =data.flag;                }
            },error:function (data) {alert("用户名效验失败"+data);            }
        });        if(flag==false){return "用户名已存在";        }
    },
});
其中required代表必填项。
OK，暂时写那么多，以后遇到坑继续填上，其实作为一个外行前端，对前端这些框架不太懂，也不太想把时间花在页面上，前端的各种框架，jquery最基础的，又有各种如bootstrap,layui,easyui,还有我没接触过的vue。术业有专攻，我选择java
	

根据官网的文档，要在一个html文件下使用layui里面的组件库其实很简单，但是在vue项目中使用该ui库却存在着很多坑，下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui
1.第一个坑：vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式，知道的可以留言探讨)
在官网中我们可以看到他提到支持npm安装，但是当我们安装成功后，在main.js中引入时却报并不能找到该模块的错。
所以，我们先下载文件包，然后在html文件中用link和script标签的方式引入
2.第二个坑：下载的文件包必须放在static文件中
我尝试了把下载的文件夹放在与html文件的同级目录下和放在src目录下或者放在assets目录下，均报layui没有定义的错误
3.正确的使用姿势：
我们把文件放在static文件下，然后在html文件下引入，这样就可以在任意的组件中使用到layui这个对象了，这样我们就可以正确的使用layui里面的各种ui组件了
pm
body,html{
margin:0;
padding:1;
}
要使用的组件：
export default{
data(){
return {
}
},
mounted(){
layui.use('element', function(){
var element = layui.element
})
},
methods:{
}
}
以上是个人使用时的一些经验总结，如各位有更好的建议或者本人有错误之处都可以反馈出来，希望能帮到大家，谢谢
以上所述是小编给大家介绍的vue使用layui框架详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

1. 将layUI依赖的js文件放入Vue项目文件夹中
2. 在index.js中引入layui.css、layui.js和jquery.js
3. 在组件create()钩子中进行配置就可以了
4. 成功