Avue 表单字段 动态下拉处理 及联动下拉处理

export const tableOption = {
  border: true,
  index: true,
  selection: true,
  indexLabel: '序号',
  stripe: true,
  menuAlign: 'center',
  align: 'center',
  dialogClickModal: false,
  searchMenuSpan: 6,
  labelWidth: 100,
  column: [{
    type: 'input',
    label: 'id',
    prop: 'id',
    hide: true,
    editDisabled: true,
    editDisplay: false,
    addDisplay: false
  }, 
  {
  // 一级下拉
    type: 'select',     // 字段类型
    label: '适用省份',   // label 名称
    prop: 'ssProvince',  // 与后台交互的 属性名
    cascaderItem: ['ssCity'],   // 用于 二级下拉框 的key值
    dicUrl: '/stl/stlregion/parentCode/100000',  // 动态字典 接口
    props: {   // 字典接口返回对象格式  {name:"",code:""}  
      label: 'name',
      value: 'code'
    },
    rules: [{   // 必填校验
      required: true,
      message: '请选择省份',
      trigger: 'change'
    }],
    search: true
  }, {
  // 二级下拉
    type: 'select',     // 字段类型
    label: '适用地市',    // label 名称
    prop: 'ssCity',    // 与后台交互的 属性名
    props: {    // 字典接口返回对象格式  {name:"",code:""}  
      label: 'name',
      value: 'code'
    },
    rules: [{
      required: true,
      message: '请选择市区',
      trigger: 'change'
    }],
    dicUrl: '/stl/stlregion/parentCode/{{key}}', // 动态字典接口 其中 {{key}}  为一级下拉框 的动态下拉值(value值)
    search: true
  }
  ]
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
嵩嵩报名系统多项目版本 v4.1 后台 /#/admin-login 帐号密码 admin admin 运行环境:标准iis环境 官网:http://www.gangh.com 以下为主要功能 ==========================系统设置======================= 系统名称在线设置 一键设置系统开启关闭 系统logo在线设置 系统版权设置 系统简介设置 ==========================项目设置========================== 可创建多个不同的项目 一键智能复制项目 一键设置项目开启关闭 开始时间结束时间设置 项目名称设置 项目简介设置 报名名额数量设置 相同ip允许的报名数量设置 报名成功提示设置 项目图形验证码开关 项目数据 项目数据分页列表显示 支持数据按关键词模糊搜索 支持数据高级查询,可指定字段进行精准搜索 数据打印功能 数据按模板生成证件打印 全部数据导出为excel格式 数据按搜索结果导出为excel格式 数据单个删除,批量删除 数据可进行编辑与修改 项目显示风格 表单的背景图片设置 表单的背景颜色设置 表单的宽度设置 表单输入框尺码设置 字段显示序号类型设置 字段排列方式设置 字段标题长度设置 =================================智能表单设计============================= 一键智能复制字段 字段名称设置 输入框内提示文字设置 可设置管理才能填写的字段 管理字段,可设置用户查询时是否可见 支持10几种必备字段类型 字段类型可随时切换 字段可设置按条件智能显示隐藏 可设置字段为不可重复字段,例如身份证号 可设置字段是否必填 可设置字段为登陆查询字段,设置后用户可查询信息 可设置字段的各种验证方式 多选选择数量区间限制设置 上传图片和文件的类型限制 上传图片的压缩比例设置,可将图片压缩到很小,方便手机端上传,节省流量与服务器空间 字段拖动排序 字段点击按钮调整顺序 设置分步骤分页显示 字段输入框宽度设置 字段标题显示宽度独立设置 字段整体显示宽度独立设置 ============================智能表单字段============================== 单行输入框 多行输入框 数字输入器 单选框 单选框(带输入) 复选框 下拉选择框 多级联动下拉选择框 日期时间选择器 颜色选择器 图片和文件上传 省市区选择器 56个民族选择器 分页按钮 文字分隔线 文字说明 =============================证件打印模板====================== 可设置多个打印模板 用户登陆后可以打印报名数据 打印模板拖动排列 可设置打印模板的宽度,调试,文字颜色等 =============================用户使用======================= 用户可根据登陆字段登陆 用户登陆后可以打印报名数据 用户登陆后可以修改报名数据 用户登陆后可以打印证件 用户上传图片时智能压缩
在 FastAdmin 中实现动态下拉表单联动,可以通过以下步骤实现: 1. 在数据库中创建两个表,例如表A和表B,其中表B的某一字段与表A的另一个字段存在关联关系。 2. 在 FastAdmin 中创建两个模型,分别对应表A和表B。 3. 在表A对应的模型中,定义一个关联方法,如: ```php public function Bs() { return $this->hasMany(B::class, 'a_id', 'id'); } ``` 其中,B::class 是表B对应的模型,'a_id' 是表B中与表A关联的字段,'id' 是表A中主键字段。 4. 在表B对应的模型中,定义一个方法,获取与表A关联的字段的值,如: ```php public static function getAOptions() { $list = A::select('id', 'name')->get(); $options = []; foreach ($list as $item) { $options[$item->id] = $item->name; } return $options; } ``` 其中,'id' 和 'name' 分别是表A中的主键和需要显示的字段。 5. 在表B对应的模型中,定义一个方法,获取与表A关联的选项,如: ```php public static function getASelectOptions($value = '') { $options = self::getAOptions(); if ($value && !isset($options[$value])) { $a = A::find($value); if ($a) { $options[$a->id] = $a->name; } } return $options; } ``` 该方法用于获取下拉框中的选项,如果当前值不存在于选项中,则尝试从表A中获取。 6. 在表B对应的模型的表单中,使用下拉框控件,并绑定选项,如: ```php $form->select('a_id', 'A')->options(B::getASelectOptions($form->model()->a_id)); ``` 其中,'a_id' 是表B中与表A关联的字段,'A' 是需要显示的字段。 7. 在表B对应的模型中,定义一个方法,获取与表A关联的数据,如: ```php public static function getAData($a_id) { $a = A::find($a_id); if (!$a) { return null; } return $a->Bs; } ``` 该方法用于获取与表A关联的数据,例如,当用户选择一个 A 的选项后,就可以通过该方法获取与之关联的 B 数据。 8. 在表B对应的模型的表单中,使用 Ajax 控件,监听 A 的变化,并根据变化获取关联的 B 数据,如: ```php $form->select('a_id', 'A')->options(B::getASelectOptions($form->model()->a_id)) ->load('b_id', url('admin/b/get-b-data')); $form->select('b_id', 'B')->options([]); ``` 其中,'b_id' 是表B中需要联动字段,'url('admin/b/get-b-data')' 是获取与 A 关联的 B 数据的 URL。 9. 在控制器中,定义一个方法,获取与表A关联的数据,并返回 JSON 格式的数据,如: ```php public function getBData(Request $request) { $a_id = $request->get('q'); $data = B::getAData($a_id); $options = []; foreach ($data as $item) { $options[$item->id] = $item->name; } return response()->json($options); } ``` 该方法接收一个参数 'q',即 A 的选项值,然后返回与之关联的 B 数据。 完成上述步骤后,就可以实现表单动态下拉表单联动了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值