网站ui设计要点百度集团公司简介
1、使用封装年度选择器代码细节
示例图和封装部分代码(可在原jeecgbootvue3的封装组件里添加yaer选择器)
在组件内使用
{label: "业务年度",field: 'setYear',component: 'YearPicker',defaultValue: dayjs().format('YYYY'),//默认值componentProps: {// format: 'YYYY',// disabled: true,valueFormat: 'YYYY', // 确保返回值只是年份placeholder: '',},colProps: {span: 6},},2、在表单树形选择ApiTreeSelect的使用
{label: "单位代码",field: 'agencyCode',colProps: {span: 6},component: 'ApiTreeSelect',componentProps: {api: async () => {try {const data = await defHttp.get({ url: '/sys/sysDepart/queryDepartTreeSync' });console.log(data, 'API response data');return data;} catch (error) {console.error('Error fetching department tree:', error);return [];}},resultField: 'result',placeholder: '请选择单位',allowClear: true,treeDefaultExpandAll: false,//打开子组件树时，是否自动展开所有节点// showSearch: true,//展示搜索图标treeNodeFilterProp: 'title',fieldNames: {label: 'title',value: 'value', children: 'children'},checkStrictly: true,onChange: (value) => {console.log('Selected value:', value);}}
}还有另一种部门选择的使用(输入框后有选择按钮)
注意defaultExpandLevel: 0,不展开属性，如果数据量大不会导致首次加载等待时间较长
{label: '负责单位',field: 'unit',component: 'JSelectDept',componentProps: ({ formActionType, formModel }) => {return {sync: false,checkStrictly: true,defaultExpandLevel: 0,};},},