Form Table 组件支持插槽吗？插槽名字直接写field的这种风格

### 本人对该功能进行了一些扩展

提交pull Reques 没提交上……

希望作者看到后，可以考虑一下加一下这个功能。

主要是在vue文件中同时写template和jsx，不太方便，不如统一风格一下，同时也给喜欢template的小伙伴多一种选择。

如有问题，请指正，共勉！！！ :blush: :blush: :blush:

/src/components/Form/src/Form.vue
```
function getSlots() {
        return slots[item.field] ? (slots[item.field] as Function)() : formItemSlots.default()
      }
      return (
        <ElFormItem
          v-show={!item.hidden}
          prop={item.field}
          label={item.label || ''}
        >
          {formItemSlots}
          {getSlots}
        </ElFormItem>
      )
```
![输入图片说明](https://foruda.gitee.com/images/1751525596017664417/918c16e5_8424179.png "屏幕截图")

```
// 使用示例。注意：插槽的name = field  
 <Form :schema="schema" label-width="auto" :label-position="isMobile ? 'top' : 'right'">
      <template #field1>
        <div> 自定义插槽的一个item </div>
      </template>
    </Form>

const schema = reactive<FormSchema[]>([
  {
    field: 'field1',
    label: t('formDemo.input')
    // ,
    // component: 'Divider' // 此处不用配置，会自动读取template中的配置
  }])
```

/src/components/Table/src/Table.vue
```
 const componentSlots = slots
      return (columnsChildren || columns).map((v) => {
        if (v.hidden) return null
        if (v.type === 'index') {
              isPreview =
                imagePreview.some((item) => (item as string) === v.field) ||
                videoPreview.some((item) => (item as string) === v.field)

if (componentSlots[v.field]) {
                return (componentSlots[v.field] as Function)({ row: data.row, index: data.$index })
              }
```
![输入图片说明](https://foruda.gitee.com/images/1751525672616878696/4e51d710_8424179.png "屏幕截图")

```
// 使用示例.  注意：插槽的name = field

<Table
      :columns="columns"
      :data="tableDataList"
      :loading="loading"
      :defaultSort="{ prop: 'display_time', order: 'descending' }"
    >
      <template #title="{ row, index }">
        <div> {{ row.title }} {{ index }} </div>
      </template>
    </Table>
```

Archer/vue-element-plus-admin

内容风险标识

评论 (0)

Archer/vue-element-plus-admin .gitee-modal { width: 500px !important; }

内容风险标识