日期类
- 日期
日期
日期
- 日期范围
设置日期范围
日期范围演示
选择类
- 开关
设置开关
开关
- 多选
设置多选
多选
下拉类
- 单选下拉列表框
设置下拉列表框
下拉列表框
不一一列举了，感兴趣的小伙伴可以看在线演示。https://naturefw.gitee.io/nf-rollup-ui-controller/
生成模板和代码
属性设置完毕之后，可以生成template模板代码，以及js里定义的对象，支持json格式。
- 模板
<el-checkbox-group v-model="checkboxs" v-bind="itemProps" > <el-checkbox v-for="item in itemProps.optionList" :key="'check' + columnId + item.value" :label="item.value" :disabled="item.disabled" > {{item.label}} </el-checkbox> </el-checkbox-group>
- js代码
const itemProps = reactive({ colName: 'test', kind: 15, controlType: 152, colCount: 0, isClear: false, clearable: true, optionList: [ { value: '1', label: '选项1', disabled: false }, { value: '2', label: '选项2', disabled: false }, { value: '3', label: '选项3', disabled: false }, { value: '4', label: '选项4', disabled: false } ] })
- json 格式
{ "colName": "test", "kind": 15, "controlType": 152, "colCount": 0, "isClear": false, "clearable": true, "optionList": [ { "value": "1", "label": "选项1", "disabled": false }, { "value": "2", "label": "选项2", "disabled": false }, { "value": "3", "label": "选项3", "disabled": false }, { "value": "4", "label": "选项4", "disabled": false } ] }
为啥要支持json呢？大家可以猜一猜。
时间仓促，可能有一点小bug，还有属性值是对象的情况，暂时还没有支持；属性是组件（比如图标）的情况，支持的也不理想。
本文作者：自然框架
个人网址：jyk.cnblogs.com
声明：本文为 脚本之家专栏作者 投稿，未经允许请勿转载。
