【手撸低代码工具】二次封装UI库（八）封装行内编辑的列表 —— 批量修改

站长

2023年06月16日 16:24 · 阅读数 55

行内编辑的列表控件

有的时候我们需要简单粗暴的直接开鲁，啊不，直接批量修改数据。这个时候我们需要一个类似 Excel 那样的编辑方式。

理论上很简单，因为 el-table 就支持这种方式，设置几个 slot 即可，官网都给举例子了，不过使用之后发现一点小问题 —— 有点卡。

大概是因为 el-table 提供的功能太多，需要很多的判断和层层封装。

但是我们这时并不需要一个功能强大的列表，而是只需要一个比较好看一点的 table。

所以，这次我们选择了 Descriptions 描述列表。

借用 css

我没有艺术细胞，不会css，所以只好去借鉴，好吧就是直接拷贝，既然 UI库都开源了，那么用一下里面的 css 可以吧。

Descriptions 在使用的时候和 table 那是一点关系都没有，但是却会被渲染为 table，这个渲染出来的 table 很简单，我都能看懂的那种。。。

既然这样，那我就不客气了。

  <tr
    v-for="(item, id, index1) in model"  // 遍历 记录集，一条记录一个 tr
    :key="`grid-edit-tr_${id}_${index1}`"
  >
    <td
      v-for="(ctrId, index) in colOrder" // 遍历表单里每一个字段
      :class="myClass[index1 % 2]" // 交替背景色 
      :key="`grid-edit-td_${ctrId}_${index}`"
    >
      <!-- input -->
      <component
        :is="formItemKey[childMetaList[ctrId].controlType]"
        :model="item"
        :meta="childMetaList[ctrId]"
        v-bind="childPropsList[ctrId]"
      >
      </component>
    </td>
  </tr>

这是渲染出来的 table 的 tr，一个 tr 相当于一个表单，既然这样，那么我们可以像封装 el-form-item 那样，直接借用表单控件的状态、Interface、json等。

  import type { IFromProps } from '../map'
  import { formItemKey } from '../form-item/_map-form-item'
  import { regFormState } from '../map'
  // 创建 props
  const props = defineProps<IFromProps<T>>()
  
  // 创建状态
  const state = regFormState(props)
  // 获取需要的信息
  const { colOrder, childMetaList, childPropsList } = state
  // 隔行换背景色
  const myClass = {
    0: 'el-descriptions__cell el-descriptions__content is-bordered-content is-vertical-content',
    1: 'el-descriptions__cell el-descriptions__label is-bordered-label is-vertical-label'
  }

基础做好了之后，再扩展功能的时候就会比较简单了。

引入 Interface
引入表单子控件
创建 props
创建状态
获取需要的数据
设置不同的背景色

封装一个 table

一条记录封装好了，我们来封装整体的 table。这里主要是把表头遍历出来，可以使用 meta 里面的 colName 和 label：

  <div class="el-descriptions el-descriptions--small">
    <div class="el-descriptions__body">
      <table class="el-descriptions__table is-bordered">
        <tbody>
          <!--th-->
          <tr> // 遍历表头，把表单里面的 meta 里的 colName 和 label 拿出来。
            <th
              :class="myClass[1]"
              v-for="(ctlId, index) in formMeta.colOrder"
              :key="index"
            >
              {{ childMetaList[ctlId].label }} ({{ childMetaList[ctlId].colName }})
            </th>
          </tr>
          // 上面的 tr
        </tbody>
      </table>
    </div>
  </div>

原本是做成两个组件的，但是后来想想，似乎没有分开的必要。因为下一个组件，需要在最右面加上“保存”按钮，代码基本无法复用。

因为Vue是响应的，所以修改后，直接影响了整体model，没有后悔的机会。

话说，table 外面为啥要套上两个div？不套上的话，没有横竖分割线。

整体效果

【手撸低代码工具】二次封装UI库（八）封装行内编辑的列表 —— 批量修改

表单里的各种组件类型，在这里都可以使用，而且可以和表单控件共有相同的json文件。

至于显示风格嘛，每个人都可以有自己的喜好，我个人比较喜欢这样，简单粗暴，直接修改。

当然众口难调，于是还需要做另一个风格的行内编辑的列表。

使用方式

首先引入 json 文件，然后设置属性即可。

  <nf-grid-edit-all
    :model="model"
    :childPropsList="itemMeta"
    :formMeta="formMeta"
  >
  </nf-grid-edit-all>

放置组件，设置需要的属性：表单的 meta、input 这类的 meta

  import { reactive } from 'vue'
  import { nfGridEditAll } from '../../../../lib-elp/main'
  import showObject from '../../show-object.vue'

  import _formMeta from './form.json'  

  const json = reactive(_formMeta)

  const { formMeta, itemMeta } = json

  const model:{[key: string | number]: object} = reactive({})

  // 处理一下 model
  for(const key in itemMeta) {
    model[key] = itemMeta[key].meta
  }

引入 json 文件，获取表单的 meta 和子控件的 meta，这里把子控件的 meta 作为了model，所以调整了一下结构，便于批量修改。

话说，这自己改自己的功能，算不算自举？好吧，不算。

转载自:https://juejin.cn/post/7245084484756275258

【手撸低代码工具】二次封装UI库（八）封装行内编辑的列表 —— 批量修改

目录

行内编辑的列表控件

借用 css

封装一个 table

整体效果

使用方式