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
访问次数
3153
模块标识
jsonarrayinput
下载次数
24
模块分类
主题模板
上次更新
2024-09-05 22:28:36
开发者主页
-
购买送积分
-
纯WEB端纯手写