基于动态配置的常规后台管理页面 s-cell

一个s-cell组件撑起管理后台的页面

仅提供思路，有人需要我再整理吧，核心代码也就三百行，其实思路很简单的，读者可以自行实现

后台管理系统常规页面：

1. 表格搜索 table-search 栅格布局 + 搜索 重置

2. 表格 s-table

3. 表单 表单项生成器

s-cell 在 s-table 展示为详情时只是普通文本 而不是 a-form-model-item (渲染过多影响性能)，所以仅当渲染成控件是才会有a-form-model-item 其余都是span

原理：通用单元格组件s-cell + 动态配置的数据 循环遍历自动生成以上三者

难度：复杂交互的表单如何通过渲染完成？结论是不可以的，复杂表单还是需要手写

例如：循环渲染表单项 name tel address，address是复杂表达，那么如何设计 s-cell？

插槽的使用

// s-cell 
// 单元组件使用具名插槽
<template>
   ...
   <slot :name="dataIndex">
       // 这里是一些常规表单渲染 比如input input-number 之类的
       // 而复杂表单只需要在外部使用具名插槽与之对应即可实现表单组件的替换
       ...
   </slot>
   ...
</template>

s-cell 如何使用？

// 表单页
<a-form-model
  ref="form"
  :model="form"
>
  <s-row
    class="compony-info"
    :span="span"
  >
    <s-cell
      v-for="item in formConfig"
      :key="item.dataIndex"
      :config="item"
      :record="form"
      :prop="item.dataIndex"
      :detail="type === 'detail'"
    >
        简单表单将会通过s-cell内部自动生成
        <template slot="address">
            你的自定义复杂表单
            ...
        </template>
    </s-cell>
  </s-row>
</a-form-model>

表格搜索

<table-search @handleSearch="handleSearch">
    <template v-for="item in config.queryConfig">
      <s-cell
        :key="item.dataIndex"
        :config="item"
        :record="query"
        :prop="item.dataIndex"
      />
    </template>
  </table-search>

表格

<s-table
    ref="table"
    row-key="id"
    :columns="config.tableConfig"
    :load-data="loadData"
    select-mode="checkbox"
    tools
    @change="handleCheck"
  >
     <!-- 表头：因为有些表单是表格，title需要设置必填星号 所以全局都这么用 -->
    <span
      v-for="item in config.tableConfig"
      :key="item.dataIndex"
      :slot="item.scopedSlots.title"
    >
      {{ item.name }}
    </span>

    <template
      v-for="item in config.tableConfig"
      :slot="item.dataIndex"
      slot-scope="text, record, index"
    >
      <s-cell
        :key="item.dataIndex"
        :config="item"
        :record="record"
        :r-index="index"
        detail
      >
        <action-limit slot="action">
          <a
            v-action:detail
            @click="handleDetail(record)"
          >{{ $txt('详情') }}</a>
          <a
            v-action:edit
            @click="handleEdit(record)"
          >{{ $txt('编辑') }}</a>
          <a
            v-action:delete
            class="c-error"
            @click="handleDeleteBatch(record.id)"
          >{{ $txt('删除') }}</a>
        </action-limit>
      </s-cell>
    </template>
  </s-table>