动态页面解决方案

235 阅读1分钟

描述: 需要实现动态可用json配置的页面模板

实现思路: 将页面分为不同模块,通过json配置不同模块显示的组件。

示例页面:

image.png

这个页面分为头部,左边菜单,右边表格三个组件,通过json配置

data: [
        {
          style: {
            width: '100%'
          },
          component: 'top', // 组件
          props: { // 组件传参
          }
        },
        {
          style: {}, // 样式
          children: [
            {
              style: {
                width: '200px',
                height: '100%',
                padding: '20px'
              },
              component: 'left', // 组件
              props: { // 组件传参
                  ...
              }
            },
            {
              style: {
                width: 'calc(100% - 200px)',
                height: '100%',
                padding: '20px'
              },
              component: 'list', // 组件
              props: { // 组件传参
                ...
              }
            }
          ]
        }
      ]