当前位置：首页 > wzjs >正文

网站ui设计要点推广网站平台

wzjs 2025/8/28 5:01:57

网站ui设计要点,推广网站平台,免费网站建设平台哪个好,商务网站建设包含了1、使用封装年度选择器代码细节示例图和封装部分代码(可在原jeecgbootvue3的封装组件里添加yaer选择器)在组件内使用{label: "业务年度",field: setYear,component: YearPicker,defaultValue: dayjs().format(YYYY),//默认值componentProps: {// format: YYYY,// dis…

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,};},},

查看全文

http://www.dtcms.com/wzjs/515433.html