fastadmin 动态下拉组件 SelectPage
2024-09-26
20
1. 前言2. 常规用法3. 常用属性4. 数据源
1. 前言
FastAdmin 中的动态下拉列表使用的是优秀强大的 Selectpage 插件,FastAdmin 对其进行了二次开发
这个插件适合用于下拉框数据较多时,比如: 发布文章时选择哪个用户发布的。并且支持下拉多选,非常实用
更多用法参考 FastAdmin 官方文档
2. 常规用法
基础用法: 给表单元素的 class 添加一个 selectpage
,然后再添加一个 data-source
属性提供数据源
<input id="c-name" class="form-control selectpage" data-source="category/selectpage">
3. 常用属性
属性 | 功能 |
---|---|
data-source | 提供数据源的 URL 地址或 JSON 数据 |
data-field | 自定义显示字段,默认为 name |
data-primary-key | 自定义主键字段,默认为 id |
data-params | 自定义扩展参数 |
4. 数据源
data-source
支持 Object
和 远程URL
返回两种方式,如:
// Object
data-source='[{"id":"1","name":"标题1"},{"id":"2","name":"标题2"}]'
// 远程URL
data-source="category/selectpage"
当使用 远程URL
的方式时需要远程返回 JSON 数据,如:
// 其中 list 为数据列表, total 为总记录数,总记录数将用于前端显示分页使用
{"list":[{"id":1,"name":"admin"},{"id":2,"name":"liang"}],"total":30}
Selectpage
列表中显示字段默认是 name
,主键字段默认是 id
更新于:18天前<!-- data-field 自定义显示字段、data-primary-key 自定义主键字段 -->
<input data-source="category/selectpage" data-field="title" data-primary-key="value">
赞一波!
相关文章
- 一张图解析 FastAdmin 中的表格列表
- Vue CLI 2 脚手架 TabBar 组件封装
- 自定义事件子组件与父组件通信
- Vue组件插槽的使用
- Vue组件之动态组件
- Vue 组件介绍及使用
- Vue组件的data必须是一个函数、单个根元素、局部组件
- Vue 父子组件通信传值(子组件中使用父组件中的数据)
- MATLAB如何导出C/C++可以调用的动态库DLL
- Vue中的数据传递:深入理解组件通信机制
- Vue中的全局变量:在组件间共享数据的灵活解决方案
- Android开发中的Service组件:理解与实战
- Vue.js中的组件化开发与单文件组件(SFC)
- 解决Vue动态组件数据更新不及时问题
- 如何将python写的程序打包成DLL动态库
- JS动态操控CSS样式:赋予网页无限生机
- React Hooks:重塑组件开发的艺术
- react useEffect 在组件挂载时运行了两次
- Web前端如何高效使用ECharts:打造动态可视化图表的实战指南
- Vue.js组件间通信指南:从基础到实践
文章评论
评论问答