-
form layui vue 和_在vue中使用 layui框架中的form.render()无效解决办法
2020-12-24 18:41:41下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法。近期开发的项目中前端ui框架用的是Layui,数据渲染使用vue去渲染,当我用vue渲染表单控件的数据时,会出现控件被禁用的情况,例如:select下拉等,...下面简单介绍在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,完美解决。
-
form layui vue 和_layui 使用总结
2021-01-09 18:58:16就简单的使用layui进行开发了。1、layui的js、css引入跳过。2、layui的js开头定义:首先统一的js语法开头layui.use();要用到什么组件自己添加,下面的示例是用到了jquery、ajax、form表单等组件;但ajax的写法有很多...最近开发中在做项目的后台管理系统。用的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
-
form layui vue 和_详解如何在vue项目中使用layui框架及采坑
2020-12-24 18:41:37根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui1.第一个坑:vue项目中使用npm安装引入...根据官网的文档,要在一个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组件了
pmbody,html{
margin:0;
padding:1;
}
要使用的组件:
export default{
data(){
return {
}
},
mounted(){
layui.use('element', function(){
var element = layui.element
})
},
methods:{
}
}
以上是个人使用时的一些经验总结,如各位有更好的建议或者本人有错误之处都可以反馈出来,希望能帮到大家,谢谢
以上所述是小编给大家介绍的vue使用layui框架详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
-
Vue:vue中使用layUI
2020-12-07 15:36:37 -
form layui vue 和_layui给下拉框及日期组件赋值
2021-01-08 01:22:42一、吐槽,layui感觉真的是比较不好用二、为啥不好用呢,在现如今的页面动态渲染的情况的,layui这种基于原生js的模式让代码编写变得很臃肿, 可能一个功能的开发我用其vue框架很简便就实现了,但是使用这个就要用很... -
vue 中使用 layui
2020-07-18 10:51:36vue 中使用 layui 1. 安装 : 根据 layui 官网 介绍可以用命令行直接安装 . 我用 npm 安装后总会有报错 , 就没成功过一次 . 解决办法 : 去 layui 官网首页 下载文件包 . 2. 拖动 : 将下载的文件包解压后 , 把整个解压... -
vue中使用layui弹框layui-layer
2020-06-11 22:26:18vue中使用layui弹框layui-layer1.在vue中引入layui-layer2.引入jquery3,使用4.运行 1.在vue中引入layui-layer npm i --save layui-layer 2.引入jquery <script src=... -
vue中使用layui
2020-03-18 15:28:25<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" /> <script src="https://www.layuicdn.com/layui/layui.js">...这里 我在index.html 中直接加载了... -
vue中如何使用layui
2020-01-16 14:00:35vue中使用layui只能下载官方的包,然后引用js/css文件。 1.下载layui包 [> https://www.layui.com/](https://www.layui.com/) -
vue中使用layui库
2020-08-07 21:50:101.第一步:在对应的项目文件下CMD安装...link rel="stylesheet" href="../node_modules/_layui@0.0.1@layui/dist/layui.css"> <script src="../node_modules/_layui@0.0.1@layui/dist/layui.js"></script& -
Vue中使用LayUI没有效果
2020-04-02 19:49:17Vue中使用LayUI 使用webpack打包项目: 在主HTML页面中引入Layui的css文件和脚本文件 例如使用form模块,在当前Vue实例挂载的时候,引入模块 这里我用的时form表单的模块,因为我需要访问data中的数据,所以用的是... -
layui日期与vue_在 Vue中使用layui日历控件,标注重要日子
2021-01-27 04:28:51因为在vue文件中通过import加载,不知道为什么打包后会找不到js,所以通过这种方法引入在index.html中引入文件目录需要放在static目录下// 使用方式laydate.render({elem: "#test1",// type: "datetime",value: that... -
在vue中使用 layui框架中的form.render()无效解决办法
2019-09-28 22:08:28下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法。 原文地址:小时刻个人技术博客 >http://small.aiweimeng.top/index.php/archives/layuiForm.html 近期开发的项目中前端ui框架用的是... -
Layui与vue一起使用时form表单Lyaui date控件赋值后消失问题。
2020-06-24 16:09:18在layui与vue一起使用时,表单中的某个input...总结:只要layui与vue配合使用,做了双向绑定,不管是给什么类型的元素赋值,都需要按照layui的方式赋值,然后再给vue中的data赋值。只有双向赋值了,才能赋值成功 .. -
laydate 在vue中使用_在vue项目中使用layui框架的方法及采坑总结
2020-12-19 09:44:05详解如何在vue项目中使用layui框架及采坑根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用... -
layui中使用vue,如果用layui的初始赋值绑定失效问题
2019-01-01 13:43:31如果在layui的相关节点中加了vue判断条件,那么layui给表单初始赋值的操作会失效。 下面红框里面的是错误的,如果去掉v-if="user!=null"那么即可用layui的初始赋值。 配合下面绿框看 ... -
在vue中如何使用layui
2019-07-23 11:45:25根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑:vue项目中使用npm安装... -
vue中如何使用layui?
2020-12-12 14:33:59如果vue项目根目录下没有index.html就在public文件夹下找(我的index.html在public文件夹下),找到index.html后在index.html的上面引入下载好的css和js(使用相对路径:例如./public/layui/layui.js)。并且必须将...
-
Python 调用支付宝沙箱接口 实现 扫码支付
-
android面试题!Android高级工程师每日面试题精选,知乎上转疯了!
-
MySQL 触发器
-
实现 MySQL 读写分离的利器 mysql-proxy
-
Java面试宝典.pdf
-
app安卓开发!美团Android开发工程师岗位职能要求,看这一篇就够了!
-
互联网行业职位介绍
-
2020快递企业公众满意度排名
-
投标方法论
-
设计了一个网页,怎么把服务器和域名结合在一起
-
计算机相关的外文文献翻译
-
mnist-leveldb.zip
-
Linux 下使用libusb 与USB-HID 设备通讯之控制传输
-
javaDoc文档的生成
-
基于SSM实现的房屋租赁系统【附源码】(毕设)
-
MySQL 高可用工具 heartbeat 实战部署详解
-
如何设计四象限电压转换电路?
-
MySQL 高可用工具 DRBD 实战部署详解
-
MySQL 5.7-ocp-888 最新中午题库解析
-
股份:事件发生的地方广场-源码