sparrow-js·场景化低代码搭建-编辑区块篇

前言

sparrow-js 提供两个重要提升研发效率的设计：一个是编辑区块，一个是搜索组件，本次主要介绍编辑区块部分的设计思路；采用自问自答的方式说明编辑区块的由来。

编辑区块是什么？

特定场景功能的代码片段，通过基础组件和有特定功能的逻辑组件组合而成，可增删改；可生成可读性强的源代码。

为什么会有编辑区块？

编辑区块是为sparrow-js的核心目标提效量身定做的，sparrow本身有基本可视化搭建的能力，但是通用的可视化方案提效能力有限，可能只是基础组件的拼接，操作繁杂，输出的代码更侧重UI层面的代码。前端开发由UI部分和逻辑部分组成，UI部分通过基础组件的可视化搭建就可以完成，逻辑部分比如表单上面的删除、编辑、上下线等操作，这些带有特定功能逻辑的代码需找到个介质来承载，编辑区块就是为了承载基础UI和特定逻辑功能的容器。

编辑区块是怎样使用的？

先来张图片：

选择界面右边的工具盒-》编辑区块，点击或者拖拽需要的区块即可，点击视图区域即可以配置，删除，新增等操作。

编辑区块是怎样制作出来的？

编辑区块,已高级表单为例：

文件结构

├── AdvancedTable
│   ├── AddButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── CancelButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── DeleteButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── EditButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── NewButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── SaveButton
│   │   ├── index.ts
│   │   └── index.vue
│   ├── index.ts
│   └── init.ts

1.首先需要先写出完整的静态功能区块，如下简化代码

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
    >
      <el-table-column label="Title">
        <template slot-scope="scope">
          <el-input></el-input>
          <template v-else> {
   { scope.row.title }}</template>
        </template>
      </el-table-column>

       <el-table-column label="操作" width="110" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.editable">
            <span v-if="scope.row.isNew">
              <a @click="saveRow(scope.row)">添加</a>
              <el-button slot="reference">删除</el-button>
            </span>
            <span v-else>
              <a @click="saveRow(scope.row)">保存</a>
              <a @click="cancel(scope.row.id)">取消</a>
            </span>
          </span&g