CSS Grid 布局入门实战-模仿Windows

CSS Grid 布局入门实战-模仿Windows 11 快速布局窗口

i，朋友，您来啦。带上小板凳，我们一起聊一聊今天的话题。

首先，使用过Windows 11的朋友，可能使用过窗口布局功能。那么，如何通过Grid布局实现此功能呢？

网格布局容器

采用网格布局的区域，一般称为“容器”。在容器内部通过网格定位的子元素，一般称为“项目”。

display: grid | inline-grid;

HTML

<div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

CSS

.grid{display: grid;}

CSS

.grid{display: inline-grid;}

定义列宽与行高

在指定容器为网格布局以后，采用 grid-template-columns 定义每一列的列宽，采用 grid-template-rows 定义每一行的行高。

grid-template-columns: <length> | minmax(min, max) | auto | repeat | ...
grid-template-rows: <length> | minmax(min, max) | auto | repeat | ...

HTML

<!-- 定义一个4列、多行的界面。 -->
<div>
    <div class="grid">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>
<div>
    <div class="grid grid-repeat">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>

<div>
    <div class="grid grid-fr">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>

CSS（多种写法，效果基本一致。）

.grid{
    display: inline-grid;
    background-color: #212121;
    padding:5px;
    /*写法1*/
    grid-template-columns: 10px 30px 10px 30px;
    grid-template-rows: 15px 30px;
    grid-gap:10px;
}

.grid-repeat{
    background-color: rgb(140, 139, 139);
    /*写法2*/
    grid-template-columns: repeat(2, 10px 30px);
    grid-template-rows: repeat(2, 15px 30px);
}

.grid-fr{
    background-color: rgb(193, 193, 193);
    /*写法3 取决于容器宽度*/
    grid-template-columns: 1fr 3fr 1fr 3fr;
    /*取决于容器高度*/
    grid-template-rows: 1fr 2fr;
}

.grid-item{
    background-color: #ddd;
    min-width: 10px;
    min-height:15px;
}

行间距、列间距

grid-gap: row col | row-col | 20px 20px | 20px; 分别定义行列或同时定义行列间距；
grid-row-gap: 20px; 单独定义行间距
grid-column-gap: 20px; 单独定义列间距

网格区域

grid-template-areas: <string>+

Windows11 窗口布局功能模拟

CSS

.window-layout-select{
  position: absolute;right:0;z-index: 1009;padding:5px;
  background-color: #212121;border-radius: 4px;
  grid-template-columns: repeat(2, 20px) 0 repeat(6, 6.6667px) 0 repeat(12, 3.3333px);
  grid-template-rows: 30px 0 15px 15px;
  grid-gap:2px;
  grid-template-areas: 
    "a b . c c c c d d . e e e e f f f f g g g g"
    ". . . . . . . . . . . . . . . . . . . . . ."
    "h i . j j j k k k . l l l m m m m m m n n n"
    "h o . p p p q q q . l l l m m m m m m n n n";
  display: none;
}
.window-layout-select>div{background-color: #ddd;cursor: pointer;}
.window-layout-select>div:hover{background-color:aqua;}
.radius.top.left{border-top-left-radius:4px;}
.radius.top.right{border-top-right-radius:4px;}
.radius.bottom.left{border-bottom-left-radius:4px;}
.radius.bottom.right{border-bottom-right-radius:4px;}

.item-a {grid-area: a;}
.item-b {grid-area: b;}
.item-c {grid-area: c;}
.item-d {grid-area: d;}
.item-e {grid-area: e;}
.item-f {grid-area: f;}
.item-g {grid-area: g;}
.item-h {grid-row: 3 / 5;}
.item-i {grid-area: i;}
.item-j {grid-area: j;}
.item-k {grid-area: k;}
.item-l {grid-area: l;}
.item-m {grid-area: m;}
.item-n {grid-area: n;}
.item-o {grid-area: o;}
.item-p {grid-area: p;}
.item-q {grid-area: q;}

/*demo*/
.demo{
    display: grid;right:40%;top:25%;
}

关注作者：关注有趣的网页布局。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，让我们一起加油吧。

家好，我是Echa。

又到周五啦，提前祝大家周末愉快！今天来分享一些实用的前端工具！

1. Small Dev tools

Small Dev Tools 是一个前端工具网站，包含了很多实用的功能，比如JSON解码器、JSON格式化程序、UTF8编码、Base64编码、Base64解码、CSS格式化程序、CSS压缩器等。

官网：https://smalldev.tools/

2. Carbon

Carbon 是一个在线工具，可以生成漂亮的不同风格的代码图片。

官网：https://carbon.now.sh/

3. UI Design Daily

UI 设计日报，提供免费优质的 UI 资源。

官网：https://www.uidesigndaily.com/

4. Color Hunt

ColorHunt，即颜色猎人，是一个在线设计配色的网站，其最大的特点就是使用饱和度调配配色方案。每天会根据浏览量进行更新排版，并可以直接使用。

官网：https://colorhunt.co/

5. SCHEME COLOR

SCHEME COLOR 是一个在线的配色工具网站，可以根据颜色、类型等查找合适的配色方案。

官网：https://www.schemecolor.com/

6. Keyframes

Keyframes 可以用来创建动画、阴影和使用颜色，帮助我们编写更好的CSS。

官网：https://keyframes.app/

7. Design Resources

Design Resources 是一个设计资源的集合。

官网：https://www.designresourc.es/

8. Omatsuri

Omatsuri 是一个开源项目，包含12个实用的前端工具。

官网：https://omatsuri.app/

9. UI Snippets

UI Snippets 是一个前端动画合集，可以通过右键点击想要的动画直接复制对应的 CSS 或 SCSS 代码。

官网：https://ui-snippets.dev/

10. Pattern CSS

Pattern CSS 可以用漂亮的图案填充空白背景。

官网：https://bansal.io/pattern-css

11. Can I use

Can I use 可以用来查询 HTML5、CSS、JS、SVG 在各种流行浏览器中的特性和兼容性。

官网：https://caniuse.com/

12. CSS Gradient

CSS Gradient 是一个用来快速方便的创建 CSS 渐变的网站。

官网：https://cssgradient.io/

13.CSS matic

CSS matic 是一个 CSS 工具，目前包含4个很有用的工具，分别是：支持各种颜色和透明度的渐变工具，使用渐变工具，可以创建渐变平滑的色彩变化效果和微妙的透明胶片；边框圆角工具可以帮助你方便的实现需要的圆角效果；噪声纹理可以帮助你创造奇妙的背景图案，能够实时预览结果；盒阴影工具可以控制模糊半径的变化，颜色变化，阴影大小，可以实现你想要的任何效果。

官网：https://www.cssmatic.com/

14.Am I Responsive

Am I Responsive 用来测试响应式网页。输入链接即可生成预览，Am I Responsive 能帮我们测试出页面在手机、平板电脑、笔记本电脑和桌面端设备上的浏览体验。

官网：http://ami.responsivedesign.is/

15. CSS Generator

这是一个实用的 CSS 生成器，可以实时查看调试效果。

官网：https://html-css-js.com/css/generator/

16. My Brand New Logo

My Brand New Logo 是一个CSS 调色板生成器，用来创建一致的调色板方案。

官网：https://mybrandnewlogo.com/color-palette-generator

17. 裁剪路径生成器

CSS cli-path 功能能够构建复杂的形状，该工具让我们可以轻松地以交互方式构建该多边形。

官网：https://bennettfeely.com/clippy/

18. CSS Grid Generator

CSS Grid Generator 是一个 Grid 布局生成器，通过这个工具可以快速创建自定义CSS Grid布局。

官网：https://cssgrid-generator.netlify.app/

19. CSS Layout Generator

CSS Layout Generator 布局生成器可以为布局组件创建 CSS 和 HTML 的工具。

官网：https://layout.bradwoods.io/

20. Fluid-responsive font-size calculator

Fluid-responsive font-size calculator 即响应式字体计算器，可以轻松创建流畅的排版体验。它有更广泛的支持，可以用几行 CSS 来实现。

官网：https://websemantics.uk/tools/responsive-font-calculator/

21. regex101

Regex101是学习、测试正则表达式的工具网站。

官网：https://regex101.com/

22. Regex-Vis

Regex-Vis 是一个正则表达式可视化器和编辑器。

官网：https://regex-vis.com/

23. Loupe

Loupe 是一个可视化工具，可帮助我们了解 JavaScript 的调用堆栈/事件循环/回调队列是如何执行的。

官网：http://latentflip.com/loupe/

24. RunJS

RunJS 是一个桌面应用程序，可帮助我们编写专门的 Javascript 和 Typescript 代码。它的一些优势是可以快速测试代码，轻松导入和测试库代码，并且能够修改界面、主题和字体以适应偏好。

官网：https://runjs.dev/

25. Wrap SVG Online

Wrap SVG Online 通过拖放从计算机上传图像，可以轻松地编辑网页的 SVG 图像。

官网：https://pavellaptev.github.io/warp-svg/

26. SVG Path Visualizer

SVG Path Visualizer 可以帮助我们通过输入 SVG 路径数据来快速直观地查看 SVG 图像。此外，该工具还提供了详细的说明，以便了解如何创建基本的 SVG 形状，如直线、曲线、三角形等。

官网：https://svg-path-visualizer.netlify.app/

27. BGJar

BGJar 是一个在线工具，可以轻松快速地为网站创建 SVG 背景。只需编辑必要的信息，它将自动导出图像或代码供我们应用到网站。

官网：https://bgjar.com/

28. Wavesnippets

Wavesnippets 可以将代码分步设置为动画、视频或 GIF。

官网：https://www.wavesnippets.com/

29. Generate SVG Waves

Generate SVG Waves 可以用来创建 SVG 波形背景。

官网：https://svgwave.in/

30. CodeSandbox

CodeSandbox 是一个为 Web 应用程序开发而构建的在线编辑器，支持多种主流框架。

官网：https://codesandbox.io/

31. Openbase

Openbase 帮助开发人员在数以百万计的开源软件包中进行选择和使用。

官网：https://openbase.com/

32. CodePen

CodePen 是一个在线的前端代码编辑工具，可用于制作测试页面、代码调试，所见即所得。

官网：https://codepen.io/

33. JSONLint

JSONLint 是一个 JSON 调试工具，如果遗漏了语法中的某些内容，它会进行检查。JSONLint 是处理大型 JSON 格式的绝佳工具，而且很容易上手。

官网：https://jsonlint.com/

34. Minify

Minifier 可以对 JavaScript 和 CSS 代码进行压缩，通过缩小可以提高网站加载速度。Minifier 通过删除 .js 和 .css 文件中的空白并重新格式化它们以减小大小。

官网：https://www.minifier.org/

35. Unminify

Unminify 和 Minifier 恰恰相反。使用 Unminify 可以使 .js 或 .css 文件可读。这两种工具都非常容易使用。

官网：https://unminify.com/

36. CRADIENT.ART

CRADIENT.ART 是一个高级 CSS 渐变编辑器，使用带有分层、设计工具和免费云存储的功能丰富的编辑器设计插图、图案、图标等。

官网：https://gra.dient.art/

37. 3DPop

3DPop 可以使用 CSS 生成很棒的 3D 文本效果。

官网：https://textpop3d.web.app/

38. CSS Photo Filters

CSS Photo Filters 是一个CSS图片滤镜工具，提供了 36 个 CSS 过滤器供我们使用。

官网：https://baseline.is/tools/css-photo-filters/

ttps://gitee.com/shxch1205/webrose(开源地址)

www.webrose.net.cn(官网,有在线Demo与API文档)

在前端页面布局方面，WebRose有着与其他框架完全不同、独一无二的创新简洁新方法，最终实现一行代码就解决一个问题，更完美诠释了“低代码”理念。下面详细逐步说明设计初衷。

与Vue代码比较

下面就是一段典型的Vue语法实现多页签与分割条布局嵌套组合的代码：

<el-tabs v-model="tabName">
  <el-tab-pane label="机构" name="tab_1">
     <el-row :gutter="24">
      <el-col :span="5">
        左边的内容,宽度占比5/24
      </el-col>
    
      <el-col :span="19">
        右边的内容,宽度占比19/24
      </el-col>
    </el-row>
  </el-tab-pane>
  
  <el-tab-pane label="人员" name="tab_2">
     第二个页签内容
  </el-tab-pane>
  
  <el-tab-pane label="角色" name="tab_3">
    <el-tabs v-model="tabName">
      <el-tab-pane label="常用角色" name="tab_1">
         常用角色内容
      </el-tab-pane>
      
      <el-tab-pane label="特殊角色" name="tab_2">
         特殊角色内容
      </el-tab-pane>
    </el-tabs>
  </el-tab-pane>
</el-tabs>

这个界面就是第一层是三个页签，然后第一个页签中又是左右分割，第3个页签创建两个子页签。上面这段代码要25行左右。

WebRose实现上面同样效果只需要下面3行代码：

WRS.createTabb("d1", ["机构","人员","角色"]);  //创建多页签
WRS.createSplit("d1_1", "左右", "5/24");  //第1个页签左右分割,
WRS.createTabb("d1_3", ["常用角色","特殊角色",]);  //第3个页签再创建两个子页签

从上面这段例子代码可以看出，WebRose框架的设计思想与特点是：

一个JS文件，一行JS代码就创建一个布局，不需要Html或其他文件与第二行代码，一行代码就够了。

2.没有嵌套结构，是扁平化的从上往下的顺序结构，代码结构非常简洁，没有“回调地狱”式那种缩进层次非常深的结构。

3.通过id的命名规则巧妙实现了父子关系绑定。比如创建多页签时，就会以父亲组件的id为前辍，以_1,_2,_3为后辍创建子组件，比如父组件id是d1,则子组件id为d1_1、d1_2、d1_3。分割器则是以_A与_B为后辍，比如父组件id为d1，则子组件(左右与上下分割都一样)的id 为d1_A(左边或上边)，d1_B(右边或下边)。

根据这个设计思想与嵌套思路，理论上就可以实现无限任意嵌套层次的布局，我们称之为自由布局，而且无论多少层次，代码都是扁平化结构，非常简洁。

换句话说就是，通过几个简单的API就可以自由实现任意嵌套层次的复杂布局，我们称之为“自由布局”设计。

然后继续在上面3行代码后面添加如下代码，创建表格、表单、树...等数据组件，比如：

WRS.createBillList("","d1_1_A","CRM_USER"); //在第1个页签的分割器左边创建人员表格

WRS.createBillCard("","d1_1_A","CRM_USER"); //在第1个页签的分割器右边创建人员表单

WRS.createBillList("","d1_3_1","CRM_ROLE"); //在第3个页签的第1个子页签中创建角色表格

WRS.createBillTree("","d1_3_2","CRM_CORP"); //在第3个页签的第2个子页签中创建机构树

即六七行代码就完成了一个功能界面逻辑。系统在线典型Demo以及系统自带的管理中心控制台所有功能都是这样的代码，这证明是实际可行的，完全行得通的。

常用API(总共就5种)

常见的创建自由布局的API函数如下：

WRS.createSplit("d1", "左右", 300);	左右分割,左边固定宽300像素,右边有多大撑多大会同时创建d1_A与d1_B两个子div
WRS.createSplit("d1", "左右", "25%");	左右分割,左边宽25%，右边宽75%，自适应父亲窗口大小
WRS.createSplit("d1", "右左", 300);	左右分割,但是右边固定宽300像素,左边有多大撑多大,与第一种相反
WRS.createSplit("d1", "上下", 300);	上下分割,上边高300像素,下边撑大!会占满父容器100%高度，不会撑开父窗口。与左右分割一样，也是支持百分比与“下上”反过来的
WRS.createTabb("d1", ["人员","机构","icon12/角色"]);	创建多页签，分别叫人员、机构、角色，角色页签还有个图标
WRS.createVFlow("d1", ["用户/300", "机构/325", "460", "400"]);	纵向平铺布局,从上往下平铺下去，会撑开整个父容器，在父容器中生成滚动条
WRS.createLeftMenu("d1_A",[ "客户信息.基本信息", "客户信息.学习经历", "客户信息.工作经历", "客户信息.其他信息.健康情况", "客户信息.其他信息.保险记录", ], myClickMenu);	创建菜单导航条，会根据小数点分割，生成树型结构.
WRS.createHtml("d1_A","<div style='float:left;width:60%'>左边内容</div><div style='float:left;width:40%'>右边内容</div>");	直接在分割器右边再使用纯Html创建新页面

其中的WRS.createHtml(_divid, _html)有点特殊，即可以直接创建一段完全个性化的标准html，然后与分割器、多页签任意嵌套组合！

即可以先创建分割器，然后在里面创建个性化html，也可先创建个性化Html，然后在里面创建多页签。

因为一般来说大部分需求场景使用其他几个函数就可以搞定，使用WRS.createHtml()函数个性化界面的情况并不多，或者说即使有也并不会太复杂，完全可以接受，又能绝对保证可以搞定任何个性化需求，因为直接写Html在理论上无所不能，有点像个终极武器。

另外，值得提示的是WRS.createSplit()创建分割条这个函数可以通过反复嵌套，实现左中右、上中下、东西南北中、纵向多列、横向多行、表格矩阵、任意矩阵的各种效果。

比如下面这几行代码就可以实现从左到右有6列，每列宽度100像素、高度是撑满父容器。

WRS.createSplit("d1","左右",100);
WRS.createSplit("d1_B","左右",100);
WRS.createSplit("d1_B_B","左右",100);
WRS.createSplit("d1_B_B_B","左右",100);
WRS.createSplit("d1_B_B_B_B","左右",100);

仿照此例，也可以搞“上下”分割，把页面行分成6行，然后每行再分多列，既可以按绝对像素分，也可以按比例分，依次类推可以很容易把整个页面分割出任意自由行与列的矩阵出来。

即WebRose核心设计理念就是：使用分割条(createSplit)、多页签(createTabb)、纵向平铺(createVFlow)三种布局组件，再加上“导航菜单条(createLeftMenu)”与CreateHtml()函数，总共就这五个对象与方法，然后任意组合与嵌套，就可以解决所有常见布局问题。

然后在布局后的区域内部再创建表单(CreateBillCard)、表格(CreateBillList)、树(CreateBillTree)、查询框(CreateBillQuery)、报表(CreateReport)、图表(CreateChart)、工作流(CreateWorkFlow)等各种数据组件，这种函数也就七八个左右。即总共只要学习不到15个函数就可以上手开发绝大部分功能页面。

其中建表单(CreateBillCard)比较特殊，并不是封装成一个个的控件(比如文本框、下拉框、日期等)，而是就一行代码只要送入一个模板编码参数，然后在线配置模板即可，这也是为了在需求变更要增加表单字段时，可以在线配置立即生效，实现PaaS在线开发效果，而不是要改代码重新发布。这个功能另有专门文章详细讲解。

即一行代码搞定一件事，一个功能点最多也就几行代码，即非常有"低代码"的味道。

下面是一个实际相当复杂界面的代码例子截图(多层嵌套叠加)：

复杂功能前端界面代码

曾使用ElementUI验证实现上面这个同样功能需要上百行代码。

需要特别指出的是，这种低代码语法与开发模式并不是100%万能的，他更适用于管理软件界面，比如ERP等管理软件中各种表格/表单/树/多页签叠加，即都是各种“数据组件”拼装，根据经验管理软件中约70%~90%的功能属于这种类型，而对于类似互联网首页(比如淘宝/网易)，或一些领导驾驶舱报表展现界面，并不适合使用这种开发模式，而应该使用静态Html或使用Vue模式。

这种情况只要在配置菜单时把菜单类型更改一下，即不采用WRS低代码模式，而直接使用Vue模式写界面即可(在线Demo中有类似例子)，即WebRose平台可以兼容WRS低代码模式与其他模式，根据实际情况合理选择不同模式，而低代码模式如果能把70%~90%左右的功能点的开发难度大幅度降低已经很有价值了，所以要辩证的看待这个事情，千万不能抬杠。

设计理念剖析

这种通过JS函数来创建布局，一行代码创建一个容器布局，从上往下，逐层创建，还有以下几点好处：

1.非常符合设计界面时,从顶层设计往细节设计的自然习惯，就好比造房子，先画出总体布局与架构，再逐步设计各个局部与细节。比如一个界面先分成左右布局，然后右边是多页签，第一个页签中又是上下布局，上面是表格，下面是个卡片。。设计界面时就是这样的自然顺序，是一步步来的。每一步就是一行代码。

这个顺序其实也是浏览器解析整个Html的计算逻辑顺序，即浏览器也是从上往下、从外往里，从整体到局部来解析渲染绘制Html页面的，所以这种设计理念是完全科学的。

2.把创建布局容器与创建数据组件进行拆分解耦，即先创建布局（我们称为“布局容器组件”），最后创建表单、卡片、表格，这也非常像造房子，先造好房间，最后是摆放家具，家具就好比表格/表单/树这些我们称之为“数据组件”，这种设计理念也是科学与自然的。

3.一行JS代码同时干了好几件事，使开发大大简洁了，这几件事包括：

A.通过入命名,使本组件与父组件形成父子嵌套关系绑定。

B.同时创建了自己的子组件，比如创建分割条时，会生成以_A，_B为后辍的新的子组件。多页签是_1、_2、_3为后辍...

C.变相变现了“路由跳转”功能，Web中局部刷新也叫“路由跳转”，即指定某个区域是另一个url，那个url中有逻辑创建新的界面，在快速平台中，这一行js就是刷新了那块区域(假如原来有界面会自动覆盖)，并同时立即创建了新的组件，刷新url与url中构造新界面合成一步，等价于路由，而且会严格控制内存释放的问题。

D.同时创建了JS对象，这也是最关键的，即这一行代码WRS.createBillList("","d1_1_A","CRM_USER");同时在浏览器当前window中也创建了一个名为d1_1_A_BillList的JS对象，这是一个高内聚封装的对象，里面有属性、方法，数据，也是双向数据绑定，也是MVVM思想，这与Vue的组件对象的思想是完全相同的。

这也是我们一直强调是汲取了Vue先进的MVVM思想然后使用原生JS封装的思路。后续代码直接操作这个对象名来执行其方法，比如d1_1_A_BillList.queryDataByCondition("sex='男'")；就直接查询出性别为男的所有人员。

说白了这相当于自创了一种与Angular/React/Vue思想一致的第四种MVVM前端框架，只不过在低代码方面追求更极致，就想一行JS代码解决问题，而无论是Vue还是Angular等，底层本质上也是用JS来解决问题，因为浏览器只认识JS语言，即使像TypeScript这种表面上是另一种语言其实也是对JS的封装而已，即所有一切最终其实都是JS代码，原理都是一回事，并不存在另类奇葩得不可接受的问题。

换句话说，也正是因为一行代码同时搞定几件事，简化与省略了大量代码，最后变成了一行代码就OK了，这其实也是该设计的关键奥妙所在。

动态创建布局

有人应该已经看出，平台创建前端页面与组件都是使用JS函数来创建，甚至创建一段静态html也是使用函数WRS.createHtml来创建，即没有.html文件，也没有.Vue文件，只有一个JS文件。

这种JS程序动态创建界面与Vue等“申明式标签”的思路区别是，一种是静态申明式标签，一种是动态程序创建。

两者更大的区别在于根据某个条件绘制出完全不同的界面时，解决思路不同。Vue解决思路是肯定要先把所有页面都写好，然后根据一个条件，用v-if=“条件关系”，与v-else属性来处理，举个例子，比如根据登录人员的编号，如果是admin(管理员)，则使用左右布局（左边机构右边人员），如果不是admin用户，则使用多页签布局，也可比较一下两种语法：

<div v-if="LoginUser.code=='admin'">
  <el-row>
  <el-col :span="10">
    <el-billList>部门表</el-billList>
  </el-col>
  <el-col :span="14">
    <el-billList>人员表</el-billList>
  </el-col>
  </el-row>
</div>
<div v-else>  <!--如果不是admin则输出这个div-->
<el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="部门" name="first"><el-billList>部门表</el-billList></el-tab-pane>
      <el-tab-pane label="人员" name="second"><el-billList>人员表</el-billList></el-tab-pane>
</el-tabs>
</div>

WebRose平台JS代码机制如下:

if(LoginUser.code=='admin'){
   WRS.createSplit("d1", "左右", "40%");
   myDeptTable=WRS.createBillList("","d1_A", "部门模板编码");
   myUserTable=WRS.createBillList("","d1_B", "人员模板编码");
} else {
  WRS.createTabb("d1", ["部门", "人员"]);
  myDeptTable=WRS.createBillList("","d1_1", "部门模板编码");
  myUserTable=WRS.createBillList("","d1_2", "人员模板编码");
}

JS代码动态创建的逻辑可读性比静态页面配置条件属性更好些，更符合人的正向思维习惯（v-if/v-else有人觉得生涩,好象是要反来过思考），尤其是逻辑有多层if/else嵌套时，静态条件属性思路还需要把复杂条件先折算成一个变量进行配置，因为无法像JS代码那样自由灵活的搞出多层if/else，而一切都使用JS代码动态创建页面则没有这些问题，非常灵活、自由、自然。所以这两种思路也是各有利弊，也是换个思路尝试，要辩证看待。

在互联网业务场景中，一般都是静态页面更多，所以Vue这种标签申明式更适合，而在管理软件中，经常会根据复杂的权限计算，然后动态生成布局。比如一个多页签，可能是根据登录人员的角色与机构来动态生成，比如：如果是总行的管理员，则是某几个页签，如果是分行的普通员工，则又是另几个页签,会多一个页签。

即动态页面更适合直接使用JS函数来创建。

总结

WebRose低代码平台“自由布局”设计，是一种全新的创新设计新思路，一行代码解决一件事，一件事一行代码就够了，一个功能点只要几行或十几行代码就够了，非常适用于管理软件，能解决大部分功能的需求场景，可大幅度降低代码量，平台又同时兼容其他框架与模式。

在线咨询

上一篇：js入门三部曲「第二部」ep10 让坤坤变大 #cs
下一篇：ChatGPT实战搭建Express与Vue3网页版

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商