简介

输入框组件用于在表格列中实现快速编辑功能，支持单元格内直接修改数据。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 必须先设置快速保存接口
  $builder->useCRUD()->quickSaveItemApi('POST:/api/update');
  
  // 添加输入框列
  $builder->addColumnInput('title', '标题');
});

自定义配置

Builder::crud(function($builder) {
  // 设置快速保存接口
  $builder->useCRUD()->quickSaveItemApi('POST:/api/save');
  
  // 使用回调函数自定义配置
  $builder->addColumnInput('name', '名称', [
    'placeholder' => '请输入名称',
    'maxLength' => 50
  ], function($component) {
    $component->width(200);
  });
  
  // 带验证规则
  $builder->addColumnInput('email', '邮箱', [
    'placeholder' => '请输入邮箱',
    'validations' => [
      'isEmail' => true
    ],
    'validationErrors' => [
      'isEmail' => '请输入正确的邮箱格式'
    ]
  ]);
});

组件参数

参数名	类型	默认值	说明
name	string	必填	字段名称，对应数据库字段
label	string	必填	列标题，显示在表格头部
quickEdit	array	[]	快速编辑配置
option	callable\|array	[]	配置选项，可以是回调函数或数组

快速编辑配置（quickEdit）

属性名	类型	默认值	说明
type	string	input-text	输入框类型，固定为 'input-text'
saveImmediately	bool	true	是否立即保存
placeholder	string	-	占位符
maxLength	int	-	最大长度
validations	array	-	验证规则
validationErrors	array	-	验证错误提示

输入框组件属性

属性名	类型	默认值	说明
width	int\|string	-	列宽度
align	string	-	水平对齐方式
vAlign	string	-	垂直对齐方式
className	string	-	CSS 类名

使用场景

快速修改标题
编辑备注信息
修改名称字段
更新简单文本内容

注意事项

必须先设置 quickSaveItemApi 接口地址，否则会抛出异常
默认启用立即保存（saveImmediately: true）
输入完成后会自动触发保存请求
支持表单验证功能
保存接口需要接收主键ID和修改的字段值