需求背景

目前我们的B端管理系统当中，基本都是分为编辑与详情这样的展示页面。新增、编辑都是可编辑态的表单，详情页为只读态的显示并且对于空值还希望展示“-”。

在我们以往的开发中，通常有两种实现方式：

1. 采用新增、编辑与详情页分别编写的方式。这种方式的话需要将编辑态与详情页的表单内容重复编写两次，效率低下，并且没有做到良好的代码复用，不利于维护。

1. 将编辑页与详情页编写到一起，这种做法的话需要再一个页面中区分当前是编辑态还是只读态，需要每一个字段都去单独控制，不仅要控制当前是表单控件还是只读态显示，还要控制 prop 属性来控制表单的校验，并且也要对空值的显示进行处理。在字段多了之后非常的麻烦。

如上图所示，我们不仅需要手动控制当前是只读显示还是可编辑表单，还需要在表单内通过 change事件 对显示的值进行处理，并且还需要对空值进行处理显示未“-”。

综合上述的问题，我们希望能有一个组件统一管理只读态与编辑态的状态，并且能够尽可能的减少使用上的心智负担，也不用为空值进行手动判断赋值，并且对于 select、radio、checkbox 等组件能够自动展示其 label。

基于以上需求，这里开发了 element-readonly-form-item 组件。

element-readonly-form-item

基于 ElementUI 的表单只读态控件，完美适配所有表单组件。主要用于新建页与详情页动态切换。支持 npm 与 cdn 方式的引入。

示例地址（Github）

fuchengwei.github.io/element-rea…

Github

github.com/fuchengwei/…

npm

www.npmjs.com/package/ele…

Vue3 (ElementPlus) 移步这里

github.com/fuchengwei/…

安装

使用 npm 或 pnpm 安装

我们推荐使用 npm 或 pnpm 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install element-readonly-form-item --save

$ pnpm add element-readonly-form-item --save

浏览器引入

在浏览器中使用 script 标签直接引入文件，并使用全局变量 ReadonlyFormItem。

我们在 npm 发布包内的 element-readonly-form-item/dist提供了 readonly-form-item.es.js readonly-form-item.umd.js。你也可以通过 或 UNPKG 进行下载。

<script src="https://unpkg.com/element-readonly-form-item/dist/readonly-form-item.umd.js"></script>

示例

npm 引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import ReadonlyFormItem from 'element-readonly-form-item'
import App from './App.vue'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.use(ReadonlyFormItem, { emptyText: '-' })

new Vue(App).$mount('#app')

快速上手

组件覆写了 el-form-item 对于 el-form-item 原有的属性、插槽都是支持的。

示例

<template>
  <el-form :model="model" :readonly="readonly" label-width="100px" label-suffix=":">
    <readonly-form-item label="输入框" prop="input">
      <el-input v-model="model.input" placeholder="请输入" />
    </readonly-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const readonly = ref(false)

const model = reactive({
  input: ''
})
</script>

从上面的代码中可以看到，我们只需要编写一套代码，无需任何复杂的判断逻辑，即可实现新增、编辑、详情页面的代码复用。使用起来就是最简单的 el-form-item 的使用方式，无需任何额外配置。最大化降低代码的侵入性。

Props

支持 el-form-item 上所有属性与插槽，并且扩展了一下 props。

参数	说明	类型	是否必填	默认值
value	只读状态下显示值	string	否	''
readonly	是否只读	boolean	否	false
emptyText	值为空时显示的内容	string	否	'-'
separator	值为数组时的分隔符	string	否	','
rangeSeparator	时间范围分隔符	string	否	'~'
dateFormat	日期类型格式化	string	否	''

注意

1. 无论 npm 或者 cdn 引入都需要自行引入 ElementUI。
2. 为 el-form 组件扩展了 readonly 属性，可同时控制 el-form 组件内所有表单的 readonly 属性。
3. el-form-item 与 readonly-form-item 可同时使用，并不会互相影响。readonly-form-item 只是对 el-form-item 进一步抽屉与封装，支持所有 el-form-item 的属性与插槽配置，其中 prop 属性是必填的。
4. dateFormat 属性格式化字符串完全按照 element日期组件格式化标准来写。默认会读取绑定字段上的 format 属性。

全局配置

在引入 ElementReadonlyFormItem 时，可以传入一个全局配置对象。该对象目前支持 emptyText、separator、rangeSeparator、dateFormat 属性。emptyText 用于改变组件的默认空文本内容，separator 设置值为数组时的分隔符，separator（默认值：','），rangeSeparator 设置时间范围分隔符，rangeSeparator（默认值：'~'），dateFormat 设置日期类控件格式化。按照引入 ElementReadonlyFormItem 的方式，具体操作如下：

import Vue from 'vue'
import ReadonlyFormItem from 'element-readonly-form-item'

Vue.use(ReadonlyFormItem, { emptyText: '-', separator: ',' })

最后如果大家觉得还不错挺好用的话，麻烦给个 Star 😜😜😜。