JSON数组输入框
可用于BuildAdmin的JSON数组输入框

    介绍

    基于BuildAdmin开发的jsonArrayInput组件，使输入框可以直接输入json格式的数组数据，支持嵌套json数组，并且支持编辑和删除。

    json的键值支持现有的baInput组件的所有组件类型，详见：表单项目组件（formItem）

    使用教程，总共分为2步

    第1步：修改对应模型，增加字段类型转换和获取器

    在model里面创建一个获取器，使值转为数组结构。
    假设test模型的json数组的字段名称为json_array，代码如下。

    php 复制代码 
    <?php namespace app\admin\model; use think\Model; /** * Test */ class Test extends Model { // 表名 protected $name = 'test'; // 自动写入时间戳字段 protected $autoWriteTimestamp = true; // 字段类型转换 protected $type = [ 'json_array' => 'json', ]; public function getJsonArrayAttr($value): array { return !$value ? [] : json_decode($value, true); } }

    第2步：编辑表单代码

    引入JsonArrayInput组件

    import JsonArrayInput from '/@/components/jsonArrayInput/index.vue'

    修改src\views\backend\test\popupForm.vue中的json_array表单项

    html 复制代码 
    <el-form-item label="JsonArray"> <JsonArrayInput v-model="baTable.form.items!.json_array" :jsonItemsConfig="[ { keyName: 'test_id', label: '远程下拉', type: 'remoteSelect', attr: { placeholder: '请选择远程下拉', pk: 'user.id', field: 'nickname', remoteUrl: '/admin/user.User/index' }, }, { label: 'switch组件', keyName: 'switch_keyname', type: 'switch', attr: { size: 'large' }, }, { label: 'datetime组件', keyName: 'datetime_keyname', type: 'datetime', attr: { placeholder: '请选择datetime数据' }, }, { label: 'string类型', keyName: 'string_key_keyname', defaultValue: '我是默认值', type: 'string', attr: { placeholder: '请输入string数据' }, }, { label: 'password类型', keyName: 'password_key_keyname', type: 'password', attr: { placeholder: '请输入password数据', maxlength: 10, clearable: true, showPassword: true }, }, { label: 'textarea类型', keyName: 'textarea_key_keyname', type: 'textarea', attr: { placeholder: '请输入textarea数据', showWordLimit: true, maxlength: 30, rows: 3 }, }, { label: 'radio类型', keyName: 'radio_key_keyname', type: 'radio', defaultValue: 'b', attr: { placeholder: '请输入radio数据', childrenAttr: { border: true }, content: { a: '选项a', b: '选项b' } }, }, { label: 'checkbox类型', keyName: 'checkbox_key_keyname', type: 'checkbox', defaultValue: '0', attr: { placeholder: '请输入checkbox数据', size: 'large', border: true, content: { '0': '选项a', '1': '选项b' } }, }, { label: 'array类型', keyName: 'array_key_keyname', type: 'array', defaultValue: [ { key: '我是默认键1', value: '我是默认值1' }, { key: '我是默认键2', value: '我是默认值2' }, ], attr: { keyTitle: '键标题', valueTitle: '值标题' }, }, ]" /> </el-form-item>

    参数介绍

    属性名 属性值
    v-model 双向绑定值，必填
    jsonItemsConfig json属性配置类型，必填
    jsonItemLabelWidth json数组表单中显示的json键的宽度，默认为160，单位px
    placeholder 数据为空时的提示语，默认为空
    addButtonName 添加按钮名称，默认为添加
    属性名 属性值
    keyName 实际的键名称，必填
    defaultValue 默认的值
    label json键的名字，仅作为展示 ，为空则与keyName相同，默认为空
    type 和formItem组件一样，详见输入框类型文档，必填
    attr 和formItem组件一样，详见可用属性类型文档
    data 同上

    更新日志

    • 2024-09-05 22:28:36

      v1.0.0

      首次发布

      无详细更新日志

    筱洛洛
    筱洛洛
    这家伙很懒，什么也没写~
    模块授权
    正版授权，允许商业使用
    免费更新至一年内发布的所有版本
    一年内发布的所有版本永久免费下载
    不加密源代码，私有部署，二开方便
    可复制产品，不支持七天无理由退款
    禁止转售、分享等任何形式的再分发
    仅 BuildAdmin 后台管理系统可以使用
    模块信息
    模块价格
    ￥9.90
    访问次数
    3118
    模块标识
    jsonarrayinput
    下载次数
    23
    模块分类
    主题模板
    上次更新
    2024-09-05 22:28:36
    开发者主页
    -
    购买送积分
    -
    纯WEB端纯手写