需求背景
目前我们的B端管理系统当中，基本都是分为编辑与详情这样的展示页面。新增、编辑都是可编辑态的表单，详情页为只读态的显示并且对于空值还希望展示“-”。
在我们以往的开发中，通常有两种实现方式：
- 采用新增、编辑与详情页分别编写的方式。这种方式的话需要将编辑态与详情页的表单内容重复编写两次，效率低下，并且没有做到良好的代码复用，不利于维护。
- 将编辑页与详情页编写到一起，这种做法的话需要再一个页面中区分当前是编辑态还是只读态，需要每一个字段都去单独控制，不仅要控制当前是表单控件还是只读态显示，还要控制 prop 属性来控制表单的校验，并且也要对空值的显示进行处理。在字段多了之后非常的麻烦。
如上图所示，我们不仅需要手动控制当前是只读显示还是可编辑表单，还需要在表单内通过 change事件 对显示的值进行处理，并且还需要对空值进行处理显示未“-”。
综合上述的问题，我们希望能有一个组件统一管理只读态与编辑态的状态，并且能够尽可能的减少使用上的心智负担，也不用为空值进行手动判断赋值，并且对于 select、radio、checkbox 等组件能够自动展示其 label。
基于以上需求，这里开发了 element-readonly-form-item 组件。
element-readonly-form-item
基于 ElementUI 的表单只读态控件，完美适配所有表单组件。主要用于新建页与详情页动态切换。支持 npm 与 cdn 方式的引入。
示例地址（Github）
fuchengwei.github.io/element-rea…
Github
npm
Vue3 (ElementPlus) 移步这里
安装
使用 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 | 否 | ” |
注意
- 无论 npm 或者 cdn 引入都需要自行引入 ElementUI。
- 为 el-form 组件扩展了 readonly 属性，可同时控制 el-form 组件内所有表单的 readonly 属性。
- el-form-item 与 readonly-form-item 可同时使用，并不会互相影响。readonly-form-item 只是对 el-form-item 进一步抽屉与封装，支持所有 el-form-item 的属性与插槽配置，其中 prop 属性是必填的。
- 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 ???。
