LayUI 问题汇总

原创已于 2022-05-26 22:43:32 修改 · 2.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#layui

于 2022-05-16 10:04:01 首次发布

前端专栏收录该内容

2 篇文章

订阅专栏

最近使用LayUI做前端，由于不熟悉前端，使用时遇到一些问题，做个简单记录，便于以后查询。

1、警告信息

前提条件：使用的是Chrome浏览器

警告信息（如下图所示）：DevTools failed to load source map: Could not load content for http://localhost:8088/js/lay-module/auth/jwt-decode.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

解决：这个警告信息并不影响使用，如果不想显示这个警告信息，进行如下设计

（1）在有警告信息页面，按F12功能键进入开发者模式

（2）点击右上角齿轮图标（设置）

（3）Preferences标签下，取消勾选Enable JavaScript source maps选项

（4）刷新页面，此时警告信息消失

2、form表单加载数据

使用 form.val()

示例：

<!DOCTYPE html>
<html>

    <body>
        <form class="layui-form" lay-filter="form_resume" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
            <div class="layui-form-item">
                  <label class="layui-form-label required">姓名</label>
                  <div class="layui-input-block">
                         <input type="text" name="full_name" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名" value="" class="layui-input">
                   </div>
             </div>
        </form>

        <script>
            layui.use([ 'form' ], function () {
                var $ = layui.$,
                    form = layui.form;

                $.ajax({
                    url:　$api + "/api/v1/xxx",
                    type: "get",
                    dataType: "json",
                    success: function(data, textStatus, jqXHR) {
                        if (data) {
                            if (data.code == 0) {
                                form.val("form_test", {
                                    "full_name": data.data.full_name
                                });
                            } else {
                                layer.msg(data.msg, { time: 1000});
                            }
                        }  else {
                            layer.msg('加载失败', { time: 1000});
                        }
                    },
                    error: function() {
                        layer.msg('服务器错误', {time: 1000});
                    }
                });
            });
        </script>
    </body>
</html>

3、文本框与按钮显示在同一行

样式使用 layui-input-inline

示例：

<div class="layui-input-inline">
      <input type="text" name="phone" placeholder="手机号" value="" class="layui-input">
</div>
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="searchBtn">查询</button>

4、表格请求增加header传递token

增加：

headers: {'Authorization':jwt.getToken() }

示例：

  table.render({
            elem: '#currentTableId',
            url: $api + '/api/v1/user/list',
            method: 'get',
            headers: {'Authorization':jwt.getToken() },
            id: 'tableId',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {field: 'id', title: 'ID', sort: true},
                {field: 'name', title: '姓名', sort: true},
                {field: 'sex', title: '性别', sort: true},
                {field: 'birthday', title: '出生日期', sort: true}
            ]],

            //异步数据接囗 - 映射接囗返回值
            parseData:function(d){
                console.log(d);
                return {
                    "code": d.code,
                    "msg": d.message,
                    "data": d.data
                }

            },
            //异步数据接囗 - 映射分页数据
            request:{
                pageName: "page_no",
                limitName: "page_size"
            },
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });

5、修改完Js文件浏览器加载不了新版本

解决：F12进入开发者模式，找到Network，勾选上Disable cache

6、Table的操作列按需显示

操作列上增加：

templet: function(d) {
return d.expire_date == "" ?'<a class="layui-btn layui-btn-xs layui-btn-warm data-count-edit" lay-event="edit">编辑</a>' : ''

示例：

table.render({
            elem: '#currentTableId',
            url: $api + '/api/v1/list',
            method: 'get',
            headers: {'Authorization':jwt.getToken() },
            id: 'tableId',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {field: 'id', title: 'ID', sort: true},
                {field: 'full_name', title: '名称', sort: true},
                {field: 'title', title: '操作', minWidth: 300, templet: function(d) {
                    return d.expire_date == "" ?'<a class="layui-btn layui-btn-xs layui-btn-warm data-count-edit" lay-event="edit">编辑</a>' : ''
                }}
            ]],

            //异步数据接囗 - 映射接囗返回值
            parseData:function(d){
                console.log(d);
                return {
                    "code": d.code,
                    "msg": d.message,
                    "data": d.data
                }

            },
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: false,
            skin: 'line'
        });

7、table不显示表头

$('th').hide();

         table.render({
            elem: '#currentTableId2',
            url: '/list',
            method: 'get',
            headers: {'Authorization':jwt.getToken() },
            id: 'tableId2',
            # toolbar: '#toolbarDemo',
            cols: [[
                //{field: 'id', title: 'ID', sort: true},
                {field: 'name'},
                {field: 'age'},
                {title: '操作', toolbar: '#currentTableBar2'}
            ]],

            //异步数据接囗 - 映射接囗返回值
            parseData:function(d){
                console.log(d);
                return {
                    "code": d.code,
                    "msg": d.msg,
                    "data": d.data
                }

            },
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: false,
            skin: 'line'
        });

        //隐藏表头
        $('th').hide();

8、常用icon图标样式

以下是添加，修改，删除图标

示例：

<a class="layui-btn layui-btn-normal layui-btn-xs data-count-add" lay-event="add"><i class="layui-icon layui-icon-addition"></i></a>
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-delete" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></a>

效果如下：

9、日期格式化

layui.util.toDateString(data, 'yyyy-MM-dd HH:mm:ss')

依赖于layui.use(['table'], function(){})

示例

layui.use(['form', 'jwt', 'table'], function () {
	var form = layui.form
	    , layer = layui.layer
	    , jwt = layui.jwt
	    , $ = layui.$;

	table.render({
	    elem: '#currentTableId',
	    url: $api + '/list',
	    method: 'get',
	    headers: {'Authorization':jwt.getToken() },
	    id: 'tableId', 
	    cols: [[
		    {field: 'start_date', templet:function(d) {
			    return layui.util.toDateString(d.start_date, 'yyyy-MM-dd');
			}},
		    {field: 'name'},
		    {toolbar: '#currentTableBar'}
	    ]],
	    page: false,
	    skin: 'line'
	});
}