{"id":565,"date":"2026-09-21T18:27:12","date_gmt":"2026-09-21T10:27:12","guid":{"rendered":"https:\/\/www.kirasu.cn\/index.php\/2026\/09\/21\/3-layui-%e5%ae%9e%e6%93%8d%e7%bb%83%e4%b9%a0%e9%a2%98\/"},"modified":"2026-09-21T18:27:12","modified_gmt":"2026-09-21T10:27:12","slug":"3-layui-%e5%ae%9e%e6%93%8d%e7%bb%83%e4%b9%a0%e9%a2%98","status":"publish","type":"post","link":"https:\/\/www.kirasu.cn\/index.php\/2026\/09\/21\/3-layui-%e5%ae%9e%e6%93%8d%e7%bb%83%e4%b9%a0%e9%a2%98\/","title":{"rendered":"Layui \u5b9e\u64cd\u7ec3\u4e60\u9898"},"content":{"rendered":"

Layui \u5b9e\u64cd\u7ec3\u4e60\u9898<\/h1>\n
\n

\u642d\u914d Thymeleaf + SpringBoot\uff0c\u9875\u9762\u653e\u5728templates\u76ee\u5f55\uff0clayui\u9759\u6001\u8d44\u6e90\u653e\u5728static\u3002
\n\u96be\u5ea6\u9010\u5c42\u9012\u8fdb\uff0c\u8986\u76d6\u4e0a\u9762\u5168\u90e8\u6838\u5fc3\u8bed\u6cd5\u3002<\/p>\n<\/blockquote>\n

\u9898\u76ee1\u3010\u57fa\u7840\uff1a\u5f15\u5165layui\u3001\u6309\u94ae\u3001layer\u6d88\u606f\u63d0\u793a\u3011<\/h2>\n

\u9700\u6c42\uff1a<\/p>\n

    \n
  1. \u521b\u5efahtml\u9875\u9762\uff0c\u5f15\u5165layui css\u548cjs<\/li>\n
  2. \u9875\u9762\u653e\u4e00\u4e2a\u666e\u901a\u6309\u94ae\uff0c\u6587\u5b57\uff1a\u70b9\u51fb\u63d0\u793a<\/li>\n
  3. \u70b9\u51fb\u6309\u94ae\uff0c\u89e6\u53d1layer.msg\uff0c\u5f39\u51fa\u6587\u5b57\uff1a\u6b22\u8fce\u5b66\u4e60Layui
    \n
    \n

    \u77e5\u8bc6\u70b9\uff1alayui\u5f15\u5165\u3001class\u6309\u94ae\u3001layer.msg\u3001layui.use\u6a21\u5757\u5316<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n

    \u9898\u76ee2\u3010\u6805\u683c\u5e03\u5c40\u3011<\/h2>\n

    \u9700\u6c42\uff1a<\/p>\n

      \n
    1. \u4f7f\u7528layui\u6805\u683c\uff0c\u4e00\u884c\u5206\u6210\u4e24\u5217<\/li>\n
    2. \u5de6\u8fb9\u53604\u4efd\uff0c\u53f3\u8fb9\u53608\u4efd<\/li>\n
    3. \u4e24\u5217\u5206\u522b\u5199\u6587\u5b57\uff1a\u5de6\u4fa7\u5185\u5bb9\u3001\u53f3\u4fa7\u5185\u5bb9
      \n
      \n

      \u77e5\u8bc6\u70b9\uff1alayui-row\u3001layui-col-md<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n

      \u9898\u76ee3\u3010\u8868\u5355\u57fa\u7840 + \u8868\u5355\u63d0\u4ea4\u76d1\u542c\u3011<\/h2>\n

      \u9700\u6c42\uff1a<\/p>\n

        \n
      1. \u7f16\u5199layui\u8868\u5355\uff0c\u5305\u542b\u4e00\u4e2a\u7528\u6237\u540d\u8f93\u5165\u6846<\/li>\n
      2. \u6dfb\u52a0\u63d0\u4ea4\u6309\u94ae\uff0c\u8bbe\u7f6e lay-submit lay-filter=”myform”<\/li>\n
      3. JS\u76d1\u542c\u8868\u5355\u63d0\u4ea4\uff0c\u63d0\u4ea4\u65f6layer.msg\u5f39\u51fa\u4f60\u8f93\u5165\u7684\u7528\u6237\u540d\uff1b\u963b\u6b62\u9875\u9762\u5237\u65b0
        \n
        \n

        \u77e5\u8bc6\u70b9\uff1alayui-form\u3001form.on\u8868\u5355\u76d1\u542c\u3001data.field<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n

        \u9898\u76ee4\u3010laydate\u65e5\u671f\u9009\u62e9\u5668\u3011<\/h2>\n

        \u9700\u6c42\uff1a<\/p>\n

          \n
        1. \u9875\u9762\u653e\u7f6e\u8f93\u5165\u6846<\/li>\n
        2. \u4f7f\u7528laydate\u6e32\u67d3\u65e5\u671f\u9009\u62e9\u5668\uff0c\u70b9\u51fb\u8f93\u5165\u6846\u5f39\u51fa\u65e5\u671f\u9762\u677f
          \n
          \n

          \u77e5\u8bc6\u70b9\uff1alaydate\u6a21\u5757<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n

          \u9898\u76ee5\u3010\u9759\u6001\u8868\u683c\u3011<\/h2>\n

          \u9700\u6c42\uff1a<\/p>\n

            \n
          1. \u4f7f\u7528layui\u9759\u6001table\uff0c\u521b\u5efa\u8868\u683c<\/li>\n
          2. \u8868\u5934\uff1a\u7f16\u53f7\u3001\u59d3\u540d\u3001\u5e74\u9f84<\/li>\n
          3. \u6dfb\u52a0\u4e24\u884c\u6570\u636e
            \n
            \n

            \u77e5\u8bc6\u70b9\uff1alayui-table\u9759\u6001\u8868\u683c<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n

            \u9898\u76ee6\u3010\u5361\u7247\u9762\u677f\u3011<\/h2>\n

            \u9700\u6c42\uff1a<\/p>\n

              \n
            1. \u4f7f\u7528layui-card\u5361\u7247\u7ec4\u4ef6<\/li>\n
            2. \u5361\u7247\u6807\u9898\uff1a\u7528\u6237\u4fe1\u606f\u5361\u7247<\/li>\n
            3. \u5361\u7247\u5185\u5bb9\uff1a\u5c55\u793a\u4e00\u6bb5\u6587\u5b57\uff1a\u8fd9\u662flayui\u5361\u7247\u7ec4\u4ef6\u793a\u4f8b
              \n
              \n

              \u77e5\u8bc6\u70b9\uff1alayui-card<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n

              \u9898\u76ee7\u3010layer\u786e\u8ba4\u5f39\u7a97\u3011<\/h2>\n

              \u9700\u6c42\uff1a<\/p>\n

                \n
              1. \u9875\u9762\u653e\u7f6e\u4e00\u4e2a\u5220\u9664\u6309\u94ae\uff08\u6837\u5f0f\u4f7f\u7528layui-btn-danger\uff09<\/li>\n
              2. \u70b9\u51fb\u6309\u94ae\uff0c\u5f39\u51falayer.confirm\u786e\u8ba4\u6846\uff0c\u63d0\u793a\uff1a\u786e\u5b9a\u5220\u9664\u8fd9\u6761\u6570\u636e\u5417\uff1f<\/li>\n
              3. \u70b9\u51fb\u786e\u8ba4\uff0c\u5f39\u51famsg\u63d0\u793a\uff1a\u5220\u9664\u6210\u529f
                \n
                \n

                \u77e5\u8bc6\u70b9\uff1alayer.confirm<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n

                \u9898\u76ee8\u3010\u5206\u9875\u7ec4\u4ef6 laypage\u3011<\/h2>\n

                \u9700\u6c42\uff1a<\/p>\n

                  \n
                1. \u9875\u9762\u653e\u7f6e\u5206\u9875\u5bb9\u5668<\/li>\n
                2. \u6e32\u67d3\u5206\u9875\uff0c\u603b\u6570\u636e120\u6761\uff0c\u6bcf\u9875\u663e\u793a10\u6761
                  \n
                  \n

                  \u77e5\u8bc6\u70b9\uff1alaypage\u5206\u9875<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n

                  \u9898\u76ee9\u3010JS\u52a8\u6001\u6e32\u67d3table\u8868\u683c\u3011<\/h2>\n

                  \u9700\u6c42\uff1a<\/p>\n

                    \n
                  1. \u5728\u9875\u9762\u653e\u4e00\u4e2atable\u5bb9\u5668\uff0cid=goodsTable<\/li>\n
                  2. \u4f7f\u7528table.render\u6e32\u67d3\u52a8\u6001\u8868\u683c<\/li>\n
                  3. \u5217\uff1a\u5546\u54c1id\u3001\u5546\u54c1\u540d\u79f0\u3001\u4ef7\u683c<\/li>\n
                  4. \u586b\u5145\u4e24\u6761\u6a21\u62df\u6570\u636e
                    \n
                    \n

                    \u77e5\u8bc6\u70b9\uff1atable\u52a8\u6001\u6e32\u67d3\u3001cols\u3001data<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n

                    \u9898\u76ee10\u3010\u7efc\u5408\u5927\u9898\uff1a\u8868\u5355+\u5361\u7247+\u5f39\u7a97\u3011<\/h2>\n

                    \u9700\u6c42\uff1a<\/p>\n

                      \n
                    1. \u4f7f\u7528layui-card\u5305\u88f9\u6574\u4e2a\u8868\u5355<\/li>\n
                    2. \u5361\u7247\u6807\u9898\uff1a\u65b0\u589e\u7528\u6237<\/li>\n
                    3. \u8868\u5355\u5305\u542b\uff1a\u59d3\u540d\u8f93\u5165\u6846\u3001\u5e74\u9f84\u8f93\u5165\u6846<\/li>\n
                    4. \u63d0\u4ea4\u6309\u94ae\uff0c\u76d1\u542c\u8868\u5355\u63d0\u4ea4<\/li>\n
                    5. \u63d0\u4ea4\u6210\u529f\u5f39\u51falayer.confirm\uff0c\u786e\u8ba4\u540e\u5f39\u51famsg\u63d0\u793a\u65b0\u589e\u6210\u529f
                      \n
                      \n

                      \u77e5\u8bc6\u70b9\uff1acard\u3001form\u8868\u5355\u3001layer.confirm\u3001form\u76d1\u542c<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

                      Layui \u5b9e\u64cd\u7ec3\u4e60\u9898 \u642d\u914d Thymeleaf + SpringBoot\uff0c\u9875\u9762\u653e\u5728templates\u76ee\u5f55\uff0cl […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[27],"class_list":["post-565","post","type-post","status-publish","format-standard","hentry","category-layui","tag-layui"],"_links":{"self":[{"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/posts\/565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/comments?post=565"}],"version-history":[{"count":0,"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/posts\/565\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/media?parent=565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/categories?post=565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/tags?post=565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}