el-form具名插槽

### el-form 中使用具名插槽

在 `el-form` 组件中利用具名插槽可以更加灵活地控制表单项的位置以及样式，增强组件的可配置性和扩展性。下面是一个具体的例子展示如何在 `el-form` 中应用具名插槽。

#### 示例代码

<template>
  <el-form :model="form">
    <!-- 默认插槽 -->
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <!-- 具名插槽 header -->
    <el-form-item>
      <template #header>
        <div class="custom-header">自定义头部</div>
      </template>
    </el-form-item>

    <!-- 具名插槽 footer -->
    <el-form-item>
      <template #footer>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </template>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  name: ''
});

function onSubmit() {
  console.log(form.value);
}

function resetForm(formName) {
  this.$refs[formName].resetFields();
}
</script>

<style scoped>
.custom-header {
  font-size: 18px;
  color: blue;
  margin-bottom: 20px;
}
</style>

在这个例子中，除了默认的表单项之外，还通过具名插槽 `#header` 和 `#footer` 添加了额外的内容到表单的不同部分[^2]。这种方式不仅可以让开发者自由定制界面布局，同时也提高了代码复用率和维护效率。