tolking/element-pro-components

A component library for Vue 3 base on element-plus

Hi there 👋

Just an ordinary web frontend programmer.

• 🔭 I’m currently working on JavaScript TypeScript Vue Futter ...
• 🌱 I’m currently learning Dart Go

element-pro-components's Issues

大佬有没有考虑做一个可编辑 table 的打算

类似 antd 的 可编辑表格

CRUD组件 自定义 pro-select 出现递归更新错误

Describe the bug

为什么自定义?

因为发现 CURD Columns 组件设置 ProSelect 好像没法办远程获取API 角色数组，貌似有个 输入触发远程获取的，但是我需要直接获取的，或者点击下拉框触发远程获取，或者直接初始化获取。

我选择初始化获取。

CRUD组件 自定义 ProSelect 出现递归更新错误报错内容

Uncaught (in promise) Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

RoleSelect.vue 封装代码

<script lang="ts" setup>
import { onMounted, ref, toRefs } from 'vue'
import { useRoleArrayRequest } from '@/services'

const props = defineProps({
  modelValue: {
    type: Array,
    default: [] as string[],
  },
})
const {modelValue} = toRefs(props)
const roleQuery = ref({ is_all_query: true })
const select = ref([])
const data = ref([])

const {data: RoleData, execute: exeRoleArray} = useRoleArrayRequest(roleQuery)
const emit = defineEmits(['update:modelValue'])
const Change = (val:any) => {
  select.value = val
  emit('update:modelValue', val)
}

onMounted(async () => {
  await exeRoleArray()
  data.value = []
  select.value = modelValue
  if(RoleData.value){
    RoleData.value?.data.forEach(item => {
      data.value.push({
        label: item.title,
        value: item.title
      })
    })
  }
})

</script>
<template>
  <pro-select
    v-model="select"
    :data="data"
    @change="Change"
    multiple
  >
  </pro-select>
</template>

users.vue 代码

<template>
  <pro-card shadow="never">
    <pro-crud
      v-loading="isFetching"
      v-model="form"
      v-model:search="searchForm"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="columns"
      :menu="menu"
      :data="list"
      :detail="detail"
      :before-open="beforeOpen"
      @search="search"
      @submit="submit"
      :table-columns="tableColumns"
      :total="total"
      @load="loadList"
      @search-reset="searchReset"
      :rules="rules"
      layout="total, ->, jumper, prev, pager, next, sizes"
      border
      stripe
      show-overflow-tooltip
    >
      <template #action>
        <pro-column-setting
          v-model="tableColumns"
        />
      </template>
      <template #menu="{ row, size }">
        <el-popconfirm :title="$t(`crud.isDelText`)" @confirm="deleteRow(row)">
          <template #reference>
            <el-button
              :size="size"
              type="danger"
              link
            >
              {{$t(`crud.delText`)}}
            </el-button>
          </template>
        </el-popconfirm>
      </template>
      <template #table-disabled="{row }">
        {{ $t(`selectBool.${row.disabled}`) }}
      </template>
      <template #detail-disabled="{ size, item }">
        {{ $t(`selectBool.${item.disabled}`) }}
      </template>
    </pro-crud>
  </pro-card>
</template>
<script lang="ts" setup>
import {markRaw, ref} from 'vue'
import {
  defineCrudColumns,
  defineCrudMenuColumns,
} from 'element-pro-components'
import {useI18n} from "vue-i18n";
import { useUsersCrudRequest } from '@/services'
import RoleSelect from '@/views/admin/system/components/RoleSelect.vue'

const {t} = useI18n()
const menu = defineCrudMenuColumns({
  label: t(`crud.label`),
  addText: t(`crud.addText`),
  detailText: t(`crud.detailText`),
  editText: t(`crud.editText`),
  searchText: t(`crud.searchText`),
  searchResetText: t(`crud.searchResetText`),
  submitText: t(`crud.submitText`),
  resetText: t(`crud.resetText`),
  detail: true,
  edit: true,
  del: false,
  searchReset: true,
  fixed: 'right',
  width: '200'
})
const selectBool = ref([
  { value: true, label: t(`selectBool.true`) },
  { value: false, label: t(`selectBool.false`) },
])

const columns = defineCrudColumns([
  {
    label: t(`system.users.uid`),
    prop: 'uid',
    component: 'el-input',
    detail: true,
    props:{
      disabled: true
    },
    width: '200'
  },
  {
    label: t(`system.users.username`),
    prop: 'username',
    component: 'el-input',
    form: true,
    search: true,
    detail: true,
    width: '200'
  },
  {
    label: t(`system.users.name`),
    prop: 'name',
    component: 'el-input',
    detail: true,
    width: '200'
  },
  {
    label: t(`system.users.mail`),
    prop: 'mail',
    component: 'el-input',
    search: true,
    detail: true,
    width: '200'
  },
  {
    label: t(`system.users.company`),
    prop: 'company',
    component: 'el-input',
    detail: true,
    width: '200'
  },
  {
    label: t(`system.users.department`),
    prop: 'department',
    component: 'el-input',
    detail: true,
    width: '200'
  },
  {
    label: t(`system.users.disabled`),
    prop: 'disabled',
    component: 'pro-select',
    form: true,
    search: true,
    detail: true,
    props: {
      data: selectBool.value
    },
    width: '200'
  },
  {
    label: t(`system.users.role_name`),
    prop: 'role_names',
    component: markRaw(RoleSelect),
    search: true,
    form: true,
    detail: true,
    width: '200',
  },
  {
    label: t(`el-date-picker.create_at`),
    prop: 'create_at',
    component: 'el-date-picker',
    props: {
      type: 'datetimerange',
      rangeSeparator: '-',
      startPlaceholder: 'start',
      endPlaceholder: 'end',
      format:"YYYY-MM-DD",
      valueFormat:"YYYY-MM-DDTHH:mm:ss"
    },
    search: true,
    detail: true,
    width: '200'
  },
  {
    label: t(`el-date-picker.update_at`),
    prop: 'update_at',
    component: 'el-date-picker',
    props: {
      type: 'datetimerange',
      rangeSeparator: '-',
      startPlaceholder: 'start',
      endPlaceholder: 'end',
      format:"YYYY-MM-DD",
      valueFormat:"YYYY-MM-DDTHH:mm:ss"
    },
    search: true,
    detail: true,
    width: '200'
  },

])
const tableColumns = ref(JSON.parse(JSON.stringify(columns)))

const rules = {
  username: {required: true, message: t('rules.users.username'), trigger: 'blur'},
  disabled: {required: true, message: t('rules.users.disabled'), trigger: 'blur'},
  association_role: {required: true, message: t('rules.users.association_role'), trigger: 'blur'},
}

const {
  form,
  searchForm,
  detail,
  loadList,
  currentPage,
  pageSize,
  list,
  total,
  isFetching,
  beforeOpen,
  submit,
  search,
  deleteRow
} = useUsersCrudRequest( true)

</script>

<style></style>

Related version

"vue": "^3.4.15",
"element-plus": "^2.5.6"
"element-pro-components": "^1.2.12"
"vite": "^5.0.11"

Link to minimal reproduction

No response

Steps to Reproduce the Bug

1. 显示详细页bug

Expected behavior

正常

Additional context

正常

正常

错误效果

支持 element-plus 1.1.0

VeryNice

Very Good！！！

columns 动态赋值问题

如果配置表单项columns，如果columns里的某个select的数据是后台接口返回的， 应该如何操作，通过column[2] 这种索引方式吗 ？

How to build docs

When I run dev and open component documentation or run build:docs, It always reminds me
Rollup failed to resolve import "E:Projectsexercisewebelement-pro-components/demo/Layout/base.vue" from "docs/docs/en-US/components/Layout.md".

Can you help me find out why?

项目打包时，是否存在该问题

node_modules/element-plus/lib/el-tree/src/model/node.d.ts:28:24 - error TS2304: Cannot find name 'Nullable'.

28 get nextSibling(): Nullable;
~~~~~~~~

node_modules/element-plus/lib/el-tree/src/model/node.d.ts:29:28 - error TS2304: Cannot find name 'Nullable'.

29 get previousSibling(): Nullable;
~~~~~~~~

node_modules/resize-observer-polyfill/src/index.d.ts:19:18 - error TS2717: Subsequent property declarations must have the same type. Property 'contentRect' must be of type 'DOMRectReadOnly', but here has type 'DOMRectReadOnly'.

19 readonly contentRect: DOMRectReadOnly;
~~~~~~~~~~~

node_modules/typescript/lib/lib.dom.d.ts:12696:14
12696 readonly contentRect: DOMRectReadOnly;
~~~~~~~~~~~
'contentRect' was also declared here.

Found 3 errors.

node 16.0.0 环境

验证规则

Describe the bug

为什么form也不是必填了 我只希望search的form 不是必填

Related version

"element-pro-components": "^1.2.12",

Link to minimal reproduction

No response

Steps to Reproduce the Bug

1

Expected behavior

1

Additional context

No response

全量引入报错

依赖版本

"element-plus": "^2.2.18",
"element-pro-components": "^1.2.6",
"vite": "2.8.6",

(this will be run only when your dependencies or config have changed)
✘ [ERROR] Could not resolve "element-plus/es/components/setps/style/css"

    node_modules/element-pro-components/lib/styles/form.js:8:7:
      8 │ import 'element-plus/es/components/setps/style/css'
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./es/components/setps/style/css.mjs" was not found on the file system:

    node_modules/element-plus/package.json:30:14:
      30 │     "./es/*": "./es/*.mjs",
         ╵               ~~~~~~~~~~~~

  You can mark the path "element-plus/es/components/setps/style/css" as external to exclude it from
  the bundle, which will remove this error.

✘ [ERROR] Could not resolve "element-plus/es/components/setp/style/css"

    node_modules/element-pro-components/lib/styles/form.js:9:7:
      9 │ import 'element-plus/es/components/setp/style/css'
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./es/components/setp/style/css.mjs" was not found on the file system:

    node_modules/element-plus/package.json:30:14:
      30 │     "./es/*": "./es/*.mjs",
         ╵               ~~~~~~~~~~~~

  You can mark the path "element-plus/es/components/setp/style/css" as external to exclude it from
  the bundle, which will remove this error.

error when starting dev server:
Error: Build failed with 2 errors:
node_modules/element-pro-components/lib/styles/form.js:8:7: ERROR: Could not resolve "element-plus/es/components/setps/style/css"
node_modules/element-pro-components/lib/styles/form.js:9:7: ERROR: Could not resolve "element-plus/es/components/setp/style/css"

搜索和重置按钮添加图标没出现

Describe the bug

添加图标没出现

Related version

如链接

Link to minimal reproduction

https://stackblitz.com/edit/2jiy3u?file=src%2FDemo.vue

Steps to Reproduce the Bug

测试加个小图标没出现 我尝试改颜色 也没出来，链接里面我已经改好了代码

Expected behavior

~

Additional context

No response

我看项目里面有很多h函数，是什么考虑没有使用jsx呢

个人认为jsx可读性更好一点，写起来也方便

[bug] pro-layout menu 卡槽没有把 collapse 参数暴露出来

Describe the bug

pro-layout menu 卡槽没有把 collapse 参数暴露出来导致自定义菜单内容收缩时文字不能隐藏

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { ref } from 'vue'
const isCollapse = ref( false)

</script>

<template>
  <pro-layout
    transition="el-fade-in"
    keep-alive
    :include="/^Keep/"
  >
    <template #menu="{meta, path, redirect }">
      <div class="flex flex-row items-center space-x-2">
        <Icon v-if="meta.icon" :icon="meta.icon" width="24" height="24"></Icon>
        <span>{{meta.title}}</span>
      </div>
    </template>
    <router-view >
      <template #default="{ Component, route }">
        <transition
          name="el-fade-in"
          mode="out-in"
          appear
        >
          <pro-card
            :key="route.fullPath"
            shadow="never"
            :ghost="true"
          >
            <component :is="Component"/>
          </pro-card>
        </transition>
      </template>
    </router-view>
  </pro-layout>
</template>

<style scoped>

</style>

Related version

vue: "^3.4.15"
element-plus: "^2.5.6"
element-pro-components: "^1.2.12"

Link to minimal reproduction

No response

Steps to Reproduce the Bug

No response

Expected behavior

正常渲染

Additional context

ColumnSetting 是否能够实现 CRUD 拖拽行？

下面的文档介绍

这两行解释 今天也看来许久有些蒙蔽。

使用Crud的指定搜索表单，添加滑块不显示

滑块不显示

const searchColumns = defineFormColumns([
    {
        label: 'Date',
        prop: 'date',
        component: 'el-date-picker',
        props: {
            type: 'daterange',
            rangeSeparator: '-',
            startPlaceholder: 'start',
            endPlaceholder: 'end',
        },
    },
    {
        label: 'magnitude',
        prop: 'magnitude',
        component: 'el-slider',
        props: {
            range: true,
            max: 10,
        },
    }
])

使用Crud的指定搜索表单，添加滑块不显示

回复

element-enhance 是 fork pro component , 并做了一些改动，和基于自己想法的拓展，会在近期删除原有 element pro component 代码，因个人对 MIT 协议了解不足，表示抱歉

【bug】通过babel-plugin-import进行按需引入组件报错无法找到

标题： 通过babel-plugin-import进行按需引入组件报错无法找到

版本

1.2.3

现象

描述：

通过安装babel-plugin-impor进行按需引入，并按照官网提示配置

plugins: [
    [
      'import',
      {
        libraryName: 'element-pro-components',
        customStyleName: (name) => {
          return `element-pro-components/lib/styles/${name.slice(4)}`
        },
      },
    ],
  ]

原因

通过查看babel-plugin-import进行转换方法,对于组件的引入会解析到包名/lib/组件名如下所示

import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx</_button>);

然而element-pro-component组件构建后的组件的js却放到了lib/styles/下了

build 问题

这个项目我打包的有一些问题
lib文件夹中没有 styles 文件夹，并且 buid 时会报一大堆 element 类型错误

请问我应该怎么正确的打包，希望大佬帮忙看下

我使用命令 npm run build

类型定义建议

element-pro-components/src/types/form.ts

Lines 84 to 88 in 48de517

	export type IFormSubmit = (
	done: () => void,
	isValid: boolean,
	invalidFields?: StringObject
	) => void

invalidFields的类型可以直接定义成

interface InvalidFields {
  [prop: string]: { message: string; field: string }[];
}

因为element plus使用async-validator进行验证，可以进行如下定义

import { RuleItem } from "async-validator";

type ElementRuleTrigger = "blur" | "change";
export type ElementRuleItem = RuleItem & { trigger: ElementRuleTrigger | ElementRuleTrigger[] };

element-pro-components/src/types/form.ts

Line 31 in 48de517

export interface FormColumn<T = StringObject> extends IColProps, StringObject {

element-pro-components/src/types/form.ts

Line 13 in 48de517

export interface IFormProps<T = StringObject> extends IRowProps {

以上两个interface中的 rules 的类型可改为

{
  rules: ElementRuleItem | ElementRuleItem[]
}

typo：过度 → 过渡

Describe the bug

typo：过度 → 过渡

Related version

document

Link to minimal reproduction

https://tolking.github.io/element-pro-components/zh-CN/components/layout#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E5%BA%A6%E5%8A%A8%E7%94%BB

Steps to Reproduce the Bug

https://tolking.github.io/element-pro-components/zh-CN/components/layout#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E5%BA%A6%E5%8A%A8%E7%94%BB

Expected behavior

过度 → 过渡

Additional context

No response

table formatter无效

Describe the bug

table formatter没触发

Related version

"element-plus": "^2.3.5",
"element-pro-components": "^1.2.12",
"vue": "3.2.45",

Link to minimal reproduction

https://stackblitz.com/edit/yr12tg?file=src%2FDemo.vue

Steps to Reproduce the Bug

链接

Expected behavior

链接

Additional context

No response

CRUD form 自定义时间控件怎么 setValue,提交后端一直是null 值

code

<template #form-get_time="{ item, value, setValue }">
        <el-date-picker
            v-model="getTime"
            type="date"
            :default-value="value"
            placeholder="Pick a day"
            @change="setValue = getTime.value"
        />
      </template>

CRUD 在多个表单头是否能进一步利用？

官方 code:

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :table-columns="tableColumns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @submit="submit"
    @reset="reset"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineTableColumns,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        form: true,
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
        form: true,
        search: true,
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
        detail: true,
      },
    ])
    const tableColumns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'User',
        children: [
          {
            label: 'Name',
            prop: 'name',
          },
          {
            label: 'Address',
            prop: 'address',
          },
        ],
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const reset = () => {
      console.log('reset')
    }

    const deleteRow = (row) => {
      console.log('deleteRow', row)
    }

    return {
      form,
      serachForm,
      columns,
      tableColumns,
      data,
      detail,
      beforeOpen,
      submit,
      reset,
      deleteRow,
    }
  },
})
</script>

我希望能这样 他能识别

user: {
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}
},

如下:

<template>
  <pro-crud
    v-model="form"
    v-model:search="serachForm"
    :columns="columns"
    :table-columns="tableColumns"
    :menu="{ label: 'Operations' }"
    :data="data"
    :detail="detail"
    :before-open="beforeOpen"
    label-width="100px"
    @submit="submit"
    @reset="reset"
    @delete="deleteRow"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineTableColumns,
  defineCrudBeforeOpen,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({})
    const serachForm = ref({})
    const detail = ref({})
    const columns = defineCrudColumns([
      {
        label: 'Date',
        prop: 'date',
        component: 'el-input',
        form: true,
        detail: true,
      },
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
        form: true,
        search: true,
        detail: true,
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
        detail: true,
      },
    ])
    const tableColumns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'User',
        children: [
          {
            label: 'Name',
            prop: 'name',
          },
          {
            label: 'Address',
            prop: 'address',
          },
        ],
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        // 请注意以下 code
        user: {
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          }
      },
      {
        date: '2016-05-02',
         // 请注意以下 code
        user: {
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
          }
      },
    ])

    const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
      if (type === 'edit') {
        form.value = row || {}
      } else if (type === 'detail') {
        detail.value = row || {}
      }
      done()
    })

    const submit = defineCrudSubmit(
      (close, done, type, isValid, invalidFields) => {
        ElMessage(`submit: ${type}, ${isValid}`)
        console.log('submit', form.value, type, isValid, invalidFields)
        setTimeout(() => {
          isValid ? close() : done()
        }, 1000)
      }
    )

    const reset = () => {
      console.log('reset')
    }

    const deleteRow = (row) => {
      console.log('deleteRow', row)
    }

    return {
      form,
      serachForm,
      columns,
      tableColumns,
      data,
      detail,
      beforeOpen,
      submit,
      reset,
      deleteRow,
    }
  },
})
</script>

undefined value for fields that are not edited

Describe the bug

Hi,
first of all, thanks for this very useful code! this is very helpful.
I am encountering an issue. after building a form for a json schema object, all fields, including optional, are getting values.
Fields that are not edited are getting undefined values.

This is very problematic in our code.
Can this be configured somehow?

thanks
Sigal

Related version

element-pro-components: 1.2.12

Link to minimal reproduction

No response

Steps to Reproduce the Bug

1. build a form from simple schema
2. edit one field
3. submit
4. see that all empty fields that were not edited, are sent as undefined

Expected behavior

build a form,
edit only one field
click submit
only one change should appear

Additional context

No response

pro-layout Bug

Describe the bug

pro-layout 组件设置keep-alive，如果不设置include，pro-tab组件close的时候肯定需要清除keep-alive缓存，切换pro-tab保持缓存，重新进入，继续缓存。

问题：pro-layout，不设置include，pro-tab close如何清除keep-alive缓存?

Related version

vue 3.2.40

Link to minimal reproduction

No response

Steps to Reproduce the Bug

<pro-layout
    :routes="routes"
    transition="el-fade-in"
    keep-alive="true"
  >
    <template #logo="{ collapse }">
      <transition
        name="el-zoom-in-top"
        mode="out-in"
      >
        <img
          v-if="collapse"
          src="/logo.svg"
          alt="logo"
          class="logo-img"
        >
        <span
          v-else
          class="logo-title"
        > element-pro-components </span>
      </transition>
    </template>
    <template #header-left>
      <pro-breadcrumb />
    </template>
    <template #header-right>
      <nav-header />
    </template>
    <template #header-bottom>
      <pro-tabs ref="tabs" />
    </template>
  </pro-layout>

Expected behavior

pro-layout 组件设置keep-alive，pro-tab组件close的时候肯定需要清除keep-alive缓存，切换pro-tab保持缓存，重新进入，继续缓存。

Additional context

No response

路由菜单设计不人性化

这是一个 分组的菜单

const routes: RouteRecordRaw[] = [
  {
    path: '/dev/',
    redirect: '/dev/Layout',
    component: BaseLayout,
    meta: { title: 'Development', icon: markRaw(Edit) },
    children: [
      {
        path: '/dev/Layout',
        component: () => import('../views/Layout.vue'),
        meta: { title: 'Layout' },
      },
      {
        path: '/dev/Table',
        component: () => import('../views/Table.vue'),
        meta: { title: 'Table' },
      }
    ],
  },
]

export default routes

二个分组如下

const routes: RouteRecordRaw[] = [
  {
    path: '/dev/',
    redirect: '/dev/Layout',
    component: BaseLayout,
    meta: { title: 'Development', icon: markRaw(Edit) },
    children: [
      {
        path: '/dev/Layout',
        component: () => import('../views/Layout.vue'),
        meta: { title: 'Layout' },
      },
      {
        path: '/dev/Table',
        component: () => import('../views/Table.vue'),
        meta: { title: 'Table' },
      }
    ],
  },
 path: '/dev2/',
    redirect: '/dev/Layout2',
    component: BaseLayout,
    meta: { title: 'Development', icon: markRaw(Edit) },
    children: [
      {
        path: '/dev/Layout2',
        component: () => import('../views/Layout.vue'),
        meta: { title: 'Layout' },
      },
      {
        path: '/dev/Table2',
        component: () => import('../views/Table.vue'),
        meta: { title: 'Table' },
      }
    ],
  },
]

这个设定不人性话啊
请看看 antdv proComponents 的菜单路由, 默认 layuot 下面为路由分组

{
        path: '/',
        name: 'layout',
        meta: {title: 'layout', hidden: false},
        redirect:'/home',
        component: () => import('./layout/base.vue'),
        children: [
            {
                path: '/home',
                meta: {title: 'home', icon: 'HomeFilled', hidden: false},
                component: () => import('./views/home/index.vue'),
            },
            {
                path: '/system',
                name: 'system',
                meta: {title: 'system', icon: 'DashboardOutlined'},
                redirect: '/system/menu',
                component: () => import('./layout/base.vue'),
                children: [
                    {
                        path: '/system/menu',
                        name: 'menu',
                        meta: {title: 'menu', icon: 'DashboardOutlined'},
                        component: () => import('./views/system/menu/index.vue'),
                    },
                    {
                        path: '/system/menu2',
                        name: 'menu2',
                        meta: {title: 'menu', icon: 'DashboardOutlined'},
                        component: () => import('./views/system/menu/index.vue'),
                    },
                ]
            },
        ]
    },

[BUG] pro-select 在搜索阶段样式变形，不会自适应大小

Describe the bug

pro-select 在搜索阶段样式变形

Related version

@element-plus/icons-vue: "^2.3.1"
element-plu": "^2.5.6"
element-pro-components: "^1.2.12"
vue: "^3.4.15"
vite: "^5.0.11"

Link to minimal reproduction

No response

Steps to Reproduce the Bug

只要把 pro-select 显示在搜索就会触发， el-select 也会。

Expected behavior

正常

Additional context

为什么你的css 可以使用&

element-pro-components/src/styles/crud.css

最近也在研究写组件, 发现是一件非常困难的事情,

CRUD pro-select 怎么加入左侧图标，默认卡槽无效

{
    label: '图标',
    prop: 'icon',
    component: 'pro-select',
    props: {
      data: selectIcon.value,
      config: config.value,
      defaults: (item:any) => h(' span',
        null,
        ‘66666’,
      ),

    },

pro-tabs 下次有改动希望能留意个自定义标签的卡槽出来

类似 label 给我们更多美化的空间。

<el-tabs type="border-card" class="demo-tabs">
    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>Route</span>
        </span>
      </template>
      Route
    </el-tab-pane>
    <el-tab-pane label="Config">Config</el-tab-pane>
    <el-tab-pane label="Role">Role</el-tab-pane>
    <el-tab-pane label="Task">Task</el-tab-pane>
  </el-tabs>

form组件中的columns属性下的props 是否可以实现类型提示

组件使用时报错，页面无内容

在此叨扰，[email protected] [email protected]

全局注册时 ts error:

vue文件中引入组件报如下异常，项目无法运行

[email protected] ，之后升级到最新版都不行
请教下大家都是如何使用的，我第一次用这个组件库，很棒的库

CRUD 能否实现拖动表头列来调节宽度

经过内部测试 这个需求还满多的

调研原因: 赛选效率

pro-descriptions 如果内容比较长标签会挤压在一起中文还可以英文就很难看了

我希望能够标签名称能保证一定的宽度

pro-from 可以加分隔线吗？

如下图，我是用el-form 实现的 pro-from 可以否？

无法自定义命名空间

Describe the bug

使用 自动导入 的方式使用 elementPlus 组件想要 通过 SCSS 变量自定义主题 必须 自定义命名空间 否则会造成自定义样式与 API 组件样式冲突的问题

但 element-pro-components 并没有提供自定义命名空间的配置，导致 element-pro-components 所有组件样式无法生效

Related version

"vue": "^3.4.35"
"vite": "^5.3.5"
"element-plus": "^2.7.8"
"element-pro-components": "^1.3.1"

Link to minimal reproduction

No response

Steps to Reproduce the Bug

/

Expected behavior

添加自定义命名空间 namespce 配置项使得与 elementPlus 命名空间配置保持一致

Additional context

No response

是否可以增加vxe-table的兼容

报错：在使用unplugin-vue-components 和 unplugin-auto-import这两款插件对element-plus进行按需引用时候

Describe the bug

如果使用unplugin-vue-components 和 unplugin-auto-import这两款插件对element-plus进行按需引用，就会报如上错误。
您知道这是什么问题吗？
怎么样解决？

目前我的解决方式

把element-plus全量引入了，就不报这个错误了

Related version

vue 3.2.40

Link to minimal reproduction

No response

Steps to Reproduce the Bug

如果使用unplugin-vue-components 和 unplugin-auto-import这两款插件对element-plus进行按需引用，就会报如上错误。
您知道这是什么问题吗？

Expected behavior

期望能够按需引入，不报这个错误

Additional context

No response

官网国际化Bug

Describe the bug

Related version

vue 3.2.40

Link to minimal reproduction

No response

Steps to Reproduce the Bug

1. 点击多个pro-tabs后，点击切换中英文

Expected behavior

历史的pro-tabs国际化正常

Additional context

No response

array 类型报错is not a string

Describe the bug

UI 和 rules 如图。
填了array里头的内容，点击提交的时候报错说这个is not a string.

Related version

element-pro-component: 1.2.12
vue: 3.3.4

Link to minimal reproduction

No response

Steps to Reproduce the Bug

Create a array type in form.
Input value.
Click save.

Expected behavior

Save succeed.

Additional context

No response

[bug] pro-tabs 样式溢出bug

复现操作 添加 type="border-card"

另外问一下 pro-tabs 能不能实现目前很多admin 都使用 tabs 样式，比较好看

大佬 CRUD 组件可以实现多层级吗

类型这种，目前在做权限管理这块，对 element-pro-components 没啥思路

作者你这个路由设计说实话很别扭

我想菜单显示一级,如果有多个一级菜单， 比如 home bug 两个

需要定义2个

 {
    path: '/',
    redirect: '/home',
    component: () => import('../layout/Layout.vue'),
    meta: { title: 'Demo', icon: markRaw(House) },
    children: [
      {
        path: '/demo',
        component: () => import('../views/demo/index.vue'),
        meta: { title: '首页' },
      },
    ]
},
 {
    path: '/',
    redirect: '/bug',
    component: () => import('../layout/Layout.vue'),
    meta: { title: 'Demo', icon: markRaw(House) },
    children: [
      {
        path: '/bug',
        component: () => import('../views/bug/index.vue'),
        meta: { title: '漏洞' },
      },
    ]
}

如果使用 2个/ 有警告信息....

vue3 yarn add element-pro-components error

Describe the bug

An unexpected error occurred: "expected hoisted manifest for "element-pro-components#vue#@vue/server-renderer#@vue/compiler-ssr"".

Related version

"dependencies": {
"element-plus": "^2.2.9",
"unplugin-auto-import": "^0.9.3",
"unplugin-vue-components": "^0.21.1",
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.0",
"vite": "^3.0.0"
}

element-pro-components latest

Link to minimal reproduction

No response

Steps to Reproduce the Bug

yarn add element-pro-components

Expected behavior

install package success

Additional context

No response

部分 Vue 版本下，组件没有类型提示，全部被视为 any 类型，无属性提示

Describe the bug

你好，我在我的组件库中遇到一个问题，好像在您的组件库中也有相同的问题，但是我不确定。您有时间的话，可以看一下这个问题：
由于二次封装的组件库在编译的时候依赖了vue，我看到，您的组件库编译时，vue版本是 3.4.21。
但是在使用的时候，如果 vue 版本是 3.3.0（某些3.3.x都有可能有问题） 的时候，组件会被视为 any，从而在添加属性的时候，没有ts提示。

我之前看，是因为组件库编译出来的 .d.ts 文件中，用到了这个类型 import("vue").PublicProps ，但是在 低版本的 vue 中，并没有PublicProps 这个类型，导致使用的时候组件变成 any。

我尝试在编译组件库的时候，使用 vue 3.3.x ，但是如果在使用的过程中，版本为 3.4.15的时候，会出现一些 Ref 等其他的一些类型问题。

总之，编译组件库的时候的vue版本，和使用组件库的时候的 vue版本，如果不一致，会出现很多意想不到的问题。

同时， element plus 版本不一致的时候，也会有一些问题，例如 更换国际化语言的时候，会有不生效的问题

这个版本问题困扰了我很久，如果您也有类似的问题，可以私信我解决方案，谢谢。

Related version

vue 3.3.0 element-pro-components 1.3.1

Link to minimal reproduction

无

Steps to Reproduce the Bug

npm install [email protected]

然后使用组件

<script setup lang="ts">
import { ProTable } from 'element-pro-components'
</script>

<template>
    <ProTable :data="''"  index="xx" />
</template>

Expected behavior

在 vue 3.3.0 中，目前的样子：

没有提示 和 错误 提示。

在 vue 3.4.13中，能正确提示：

目的想让其能够适配更多的 vue3 版本

Additional context

No response

CRUD 如何固定左右两列

fixed: true 配置无效，
我想要让ID固定下来。

<template>
  <pro-crud
      v-model="form"
      v-model:search="serachForm"
      :columns="columns"
      :menu="{ label: 'Operations' }"
      :data="data"
      :detail="detail"
      :before-open="beforeOpen"
      label-width="100px"
      @search="search"
      @submit="submit"
      @delete="deleteRow"
      row-key="key"
      style="width: 100%"
      max-height="250"
      :table-columns="tableColumns"
  >
    <template #action>
      <pro-column-setting
          v-model="tableColumns"
          trigger="click"
      />
    </template>
  </pro-crud>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import {
  defineCrudColumns,
  defineCrudSubmit,
  defineCrudSearch,
  defineCrudBeforeOpen,
} from 'element-pro-components'
const form = ref({})
const serachForm = ref({})
const detail = ref({})
const columns = ref([
  {
    label: 'ID',
    prop: 'id',
    component: 'el-input',
    add: true,
    edit: true,
    search: true,
    detail: true,
    fixed: true  // 看看这里我为什么配置没有效果？？？？
  },
  {
    label: '节点',
    prop: 'node',
    component: 'el-input',
    add: true,
    edit: true,
    search: true,
    detail: true,
  },
  {
    label: '路由名称（标记）',
    prop: 'name',
    component: 'el-input',
    add: true,
    edit: true,
    search: true,
    detail: true,
  },
  {
    label: '路径',
    prop: 'path',
    component: 'el-input',
    add: true,
    search: true,
    detail: true,
  },
  {
    label: '是否隐藏',
    prop: 'visible',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
  },
  {
    label: '父节点',
    prop: 'parent_node',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
  },
  {
    label: '排序',
    prop: 'sort',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
  },
  {
    label: '页面路径',
    prop: 'page_path',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
  },
  {
    label: '图标',
    prop: 'icon',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
  },
])
const tableColumns = ref(JSON.parse(JSON.stringify(columns.value)))

const data = ref([
  {
    key: '1',
    id: '1',
    node: 1,
    name: 'Tom',
    path: '11',
    visible: 'No. 189, Grove St, Los Angeles',
    parent_node: 1,
    sort: 1,
    page_path: 1,
    icon: '11',

  },
  {
    key: '2',
    id: '1',
    node: 1,
    name: 'Tom',
    path: '11',
    visible: 'No. 189, Grove St, Los Angeles',
    parent_node: 1,
    sort: 1,
    page_path: 1,
    icon: '11',
    children: [
      {
        key: '3',
        id: '1',
        node: 1,
        name: 'Tom',
        path: '11',
        visible: 'No. 189, Grove St, Los Angeles',
        parent_node: 1,
        sort: 1,
        page_path: 1,
        icon: '11',
        children: [
          {
            key: '10',
            id: '1',
            node: 1,
            name: 'Tom',
            path: '11',
            visible: 'No. 189, Grove St, Los Angeles',
            parent_node: 1,
            sort: 1,
            page_path: 1,
            icon: '11',
          },
        ]
      }
    ]
  },
])

const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
  if (type === 'edit') {
    form.value = row || {}
  } else if (type === 'detail') {
    detail.value = row || {}
  }
  done()
})

const search = defineCrudSearch((done, isValid, invalidFields) => {
  ElMessage(`search: ${isValid}`)
  console.log('search', serachForm.value, isValid, invalidFields)
  setTimeout(() => {
    done()
  }, 1000)
})

const submit = defineCrudSubmit(
    (close, done, type, isValid, invalidFields) => {
      ElMessage(`submit: ${type}, ${isValid}`)
      console.log('submit', form.value, type, isValid, invalidFields)
      setTimeout(() => {
        isValid ? close() : done()
      }, 1000)
    }
)

const deleteRow = (row: any) => {
  ElMessage('deleteRow')
  console.log('deleteRow', row)
}
</script>

路由跳转可访问性支持

Describe the bug

建议为支持路由跳转的元素使用 a 标签包裹，更加语义化并提高可访问性，并且兼容浏览器的默认行为，比如 Ctrl + Left Click 或者 Middle Click 进行 blank 跳转 等

Related version

/

Link to minimal reproduction

No response

Steps to Reproduce the Bug

/

Expected behavior

/

Additional context

No response

search-menu-right 插槽能改变下位置嘛

Describe the bug

这个两个能不能不放到一个form-content里面

Related version

"element-plus": "^2.3.5",
"element-pro-components": "^1.2.12",

Link to minimal reproduction

No response

Steps to Reproduce the Bug

如上

Expected behavior

如上

Additional context

No response

Error: Cannot find module 'worker_threads'

Error: Cannot find module 'worker_threads' 缺少该 package , 启动时

checkbox 选中事件无效

Describe the bug

checkbox 选中事件无效

Related version

如链接

Link to minimal reproduction

https://stackblitz.com/edit/u1rnw6-wi4bhg?file=src%2FDemo.vue

Steps to Reproduce the Bug

checkbox 选中事件无效

Expected behavior

checkbox 选中事件无效

Additional context

No response

加一个Columns加一个属性editRender、detailRender支持render的函数动态渲染。

Describe the bug

加一个Columns加一个属性editRender、detailRender支持render的函数动态渲染。
发现使用插槽的方式form-{prop}-xxx的方式写标签并没有很节省时间，而且代码非常长

Related version

加一个Columns加一个属性editRender、detailRender支持render的函数动态渲染。

Link to minimal reproduction

加一个Columns加一个属性editRender、detailRender支持render的函数动态渲染。

Steps to Reproduce the Bug

加一个Columns加一个属性editRender、detailRender支持render的函数动态渲染。

Expected behavior

加一个Columns加一个属性editRender、detailRender支持render的函数动态渲染。

Additional context

No response