因为ts组件封装的缘故,使用某个组件就必须按照这个组件的规则使用,老是忘记,这里就记一下吧
1.ApiSelect 组件
{label: '角色',field: 'selectedroles',component: 'ApiSelect',componentProps: {mode: 'multiple',api: getAllRolesListNoByTenant,labelField: 'roleName',valueField: 'id',immediate: false,},},
其中 componentProps是对ApiSelect组件传入的参数
api :接口地址, params:参数, labelField:展示值, valueField:实际值 immediate:是否立即加载
props是父调子传参数的用法
2.updateSchema,在详情页对ts二次加工,若某个属性比如api存在则会替换,不存在如params则会新增
updateSchema([{field: 'selectedroles',show: !data?.departDisabled ?? false,componentProps: {api: getAllRolesListNoByTenant,params: {"username":recordUsername.value},},},
3.列表字段回显插槽
<!--字段回显插槽--> <template #bodyCell="{ column, record, index, text }"><template v-if="column.dataIndex == 'dictCode'"><a-select v-model:value="record.dictCode" :disabled="!record.application" placeholder="请选择字典" style="width: 100%; margin-top: 0" showSearch><a-select-option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</a-select-option></a-select></template>