Element UI 組件學習

1.  

[Vue warn]: Invalid prop: type check failed for prop "right". Expected Number with value 15, got String with value "15".
at <ElBacktop target=".layout-backtop-header-fixed .el-scrollbar__wrap" right="15" >
at <ElMain class="layout-main" style="height: calc(100% - 85px)" >
at <LayoutMain ref="layoutMainRef" >

錯誤的寫法： 

  <el-backtop :target="setBacktopClass" right=15 />

正確的寫法

  <el-backtop :target="setBacktopClass" :right=15 />

Backtop 回到頂部 | Element Plus (element-plus.org)

2.

Missing required prop: "modelValue"
at <Admin/org/menu onNodeClick=fn<onOrgNodeClick> class="my-flex-fill" select-first-node="" >
at <AsyncComponentWrapper onNodeClick=fn<onOrgNodeClick> class="my-flex-fill" select-first-node="" >

 OrgMenu  和<org-menu> 的關係是什麼？

const OrgMenu = defineAsyncComponent(() => import('/@/views/admin/org/components/org-menu.vue'))

<org-menu @node-click="onOrgNodeClick" class="my-flex-fill" select-first-node></org-menu>

 

在vue組件裏定義了property

interface Props {
  modelValue: number[] | null | undefined
  selectFirstNode: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => [],
  selectFirstNode: false,
})

改成： 

 <org-menu @node-click="onOrgNodeClick" class="my-flex-fill" select-first-node :modelValue=null></org-menu>

 

3.  把中臺admin的用戶管理頁面，改成dynamicFilter

const state = reactive({
  loading: false,
  userFormTitle: '',
  filterModel: {
    name: '',
  },
  total: 0,
  pageInput: {
    currentPage: 1,
    pageSize: 20,
    filter: {
      orgId: null,
    },
    dynamicFilter: {},
  } as PageInputUserGetPageDto,
  userListData: [] as Array<UserGetPageOutput>,
  filters: [
  {
    field: 'name',
    operator: 'Contains',
    description: '姓名',
    componentName: 'el-input',
    defaultSelect: true,
  },
  {
    field: 'mobile',
    operator: 'Contains',
    description: '手機號',
    componentName: 'el-input',
  },
  {
    field: 'email',
    operator: 'Contains',
    description: '郵箱',
    componentName: 'el-input',
  },
  {
    field: 'userName',
    operator: 'Contains',
    description: '用戶名',
    componentName: 'el-input',
  },
  ] as Array<DynamicFilterInfo>,
})

　　

                <el-form-item>

                  <my-select-input v-model="state.pageInput.dynamicFilter" :filters="state.filters" @search="onQuery" />

                </el-form-item>

引用組件

const MySelectInput = defineAsyncComponent(() => import('/@/components/my-select-input/index.vue'))

 

在types.views.d.ts 文件最後加上

declare type ComponentEnum = 'el-input'
declare type OperatorEnum =
  | 'Contains'
  | 'StartsWith'
  | 'EndsWith'
  | 'NotContains'
  | 'NotStartsWith'
  | 'NotEndsWith'
  | 'Equal'
  | 'Equals'
  | 'Eq'
  | 'NotEqual'
  | 'GreaterThan'
  | 'GreaterThanOrEqual'
  | 'LessThan'
  | 'LessThanOrEqual'
  | 'Range'
  | 'DateRange'
  | 'Any'
  | 'NotAny'
  | 'Custom'

declare type DynamicFilterInfo = {
  field: string
  operator: OperatorEnum = 'Eq'
  value: string
  description: string
  defaultSelect: boolean
  componentName: ComponentEnum = 'el-input'
}

組件component\my-select-input

<template>
  <el-input v-model="state.filter.value" class="my-input-with-select" clearable @keyup.enter="onSearch" v-bind="$attrs">
    <template v-if="state.filters.length > 0" #prepend>
      <el-select v-model="state.filter.field" style="width: 100px" @change="onChange">
        <el-option v-for="field in state.filters" :key="field.field" :label="field.description" :value="field.field" />
      </el-select>
    </template>
  </el-input>
</template>

<script lang="ts" setup name="my-select-input">
import { reactive, PropType, watch } from 'vue'
import { cloneDeep } from 'lodash-es'

const props = defineProps({
  modelValue: Object as PropType<any | undefined | null>,
  filters: {
    type: Array<DynamicFilterInfo>,
    default() {
      return []
    },
  },
})

const emits = defineEmits(['update:modelValue', 'search'])

const filters = props.filters.filter((a) => a.componentName === 'el-input')
let filter = {} as DynamicFilterInfo
if (filters.length > 0) {
  filter = cloneDeep(filters.find((a) => a.defaultSelect) || filters[0])
}

const state = reactive({
  filters: filters,
  filter: {
    field: props.modelValue?.field || filter.field,
    operator: props.modelValue?.operator || filter.operator,
    value: props.modelValue?.value || filter.value,
  } as DynamicFilterInfo,
})

const onChange = () => {
  state.filter.value = ''
}

const onSearch = () => {
  emits('search', cloneDeep(state.filter))
}

watch(
  () => state.filter,
  () => {
    emits('update:modelValue', cloneDeep(state.filter))
  },
  { deep: true }
)
</script>

<style scoped lang="scss">
.my-input-with-select :deep(.el-input-group__prepend) {
  background-color: var(--el-fill-color-blank);
}
</style>