element plus el-form雙列布局及拓展任意布局的實現(xiàn)

更新時間：2026年02月10日 09:13:26 作者：無心使然云中漫步

本文介紹了如何實現(xiàn)和拓展一個雙列布局的人員信息表單,并通過封裝el-form和Layout.vue組件,實現(xiàn)了更加靈活和可擴展的表單布局

1 場景

一般表單我們直接默認(rèn)布局，也就是單列布局，突然有個人員信息表單，需要雙列布局的需求，簡單實現(xiàn)并拓展下

2 思路

直接無腦div+flex布局實現(xiàn)

3 代碼

<template>
  <el-form ref="formRef" :model="formData" label-width="80px">
    <div class="form-top">
      <div class="form-top--left">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="請輸入姓名" />
        </el-form-item>
        <el-form-item label="年齡" prop="age">
          <el-input v-model="formData.age" placeholder="請輸入年齡" />
        </el-form-item>
        <el-form-item label="性別" prop="sex">
          <el-radio-group v-model="formData.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="郵箱" prop="email">
          <el-input v-model="formData.email" placeholder="請輸入郵箱" />
        </el-form-item>

        <el-form-item label="排序" prop="sort" placeholder="請輸入排序號">
          <el-input-number v-model="formData.sort" :min="1" />
        </el-form-item>
      </div>
      <div class="form-top--right">
        <el-form-item label="備注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="請輸入備注"
            maxlength="100"
            show-word-limit
            resize="none"
          />
        </el-form-item>
        <el-form-item label="說明" prop="config">
          <el-input
            v-model="formData.config"
            placeholder="請輸入說明"
            type="textarea"
            show-word-limit
            maxlength="200"
            :autosize="{ minRows: 6, maxRows: 6 }"
          />
        </el-form-item>
      </div>
    </div>
    <div class="form-bottom">
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">確 定</el-button>
        <el-button type="warning" @click="handleClose">取 消</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup lang="ts">
const formRef = ref();

const formData = reactive({
  remark: "",
  age: 10,
  config: "",
  email: "",
  sex: "",
  id: null,
  name: "",
  sort: 0,
});

const handleClose = () => {};
const handleSubmit = () => {};
</script>
<style lang="scss" scoped>
.container {
  width: 600px;
  margin-top: 100px;
  .form-top {
    display: flex;
    justify-content: space-between;
    .form-top--right {
      flex: 1;
    }
  }
  .form-bottom {
    display: flex;
    justify-content: flex-end;
  }
}
</style>

這樣的無腦實現(xiàn)實在是對不起付出的時間，不嫩復(fù)用是最大問題

4 拓展

封裝el-form，增加slot

// Form.vue

<template>
  <el-form>
    <slot></slot>
    <div class="form-top" v-if="!slot.default">
      <div class="form-top--left" v-if="slot.left">
        <slot name="left"></slot>
      </div>
      <div class="form-top--right" v-if="slot.right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="form-bottom" v-if="slot.bottom">
      <slot name="bottom"></slot>
    </div>
  </el-form>
</template>

<script setup lang="ts">
const slot = useSlots();
</script>
<style lang="scss" scoped>
.form-top {
  display: flex;
  justify-content: space-between;
  .form-top--left {
    flex: 1;
  }
  .form-top--right {
    flex: 1;
  }
}
.form-bottom {
  display: flex;
  justify-content: flex-end;
}
</style>

// index.vue

<template>
  <Form ref="formRef" :model="formData" label-width="80px">
    <template #left>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="請輸入姓名" />
      </el-form-item>
      <el-form-item label="年齡" prop="age">
        <el-input v-model="formData.age" placeholder="請輸入年齡" />
      </el-form-item>
      <el-form-item label="性別" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="郵箱" prop="email">
        <el-input v-model="formData.email" placeholder="請輸入郵箱" />
      </el-form-item>

      <el-form-item label="排序" prop="sort" placeholder="請輸入排序號">
        <el-input-number v-model="formData.sort" :min="1" />
      </el-form-item>
    </template>
    <template #right>
      <el-form-item label="備注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="請輸入備注"
          maxlength="100"
          show-word-limit
          resize="none"
        />
      </el-form-item>
      <el-form-item label="說明" prop="config">
        <el-input
          v-model="formData.config"
          placeholder="請輸入說明"
          type="textarea"
          show-word-limit
          maxlength="200"
          :autosize="{ minRows: 6, maxRows: 6 }"
        />
      </el-form-item>
    </template>
    <template #bottom>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">確 定</el-button>
        <el-button type="warning" @click="handleClose">取 消</el-button>
      </el-form-item>
    </template>
  </Form>
</template>

<script setup lang="ts">
import Form from "./Form.vue";
const formRef = ref();

//添加人員表單
const formData = reactive({
  remark: "",
  age: 10,
  config: "",
  email: "",
  sex: "",
  id: null,
  name: "",
  sort: 0,
});

const handleClose = () => {};
const handleSubmit = () => {};
</script>
<style lang="scss" scoped>
.form-top {
  display: flex;
  justify-content: space-between;
  .form-top--right {
    flex: 1;
  }
}
.form-bottom {
  display: flex;
  justify-content: flex-end;
}
</style>

依然不夠通用，因為布局是固定的，如果想要其他布局，要么修改Form.vue，要么重新封裝

5 繼續(xù)拓展

抽出layout，形成Layout.vue組件，拿出祖?zhèn)骷妓噑lot傳遞

// Layout.vue

<template>
  <div>
    <slot></slot>
    <div class="form-top" v-if="!slot.default">
      <div class="form-top--left" v-if="slot.left">
        <slot name="left"></slot>
      </div>
      <div class="form-top--right" v-if="slot.right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="form-bottom" v-if="slot.bottom">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const slot = useSlots();
</script>
<style lang="scss" scoped>
.form-top {
  display: flex;
  justify-content: space-between;
  .form-top--left {
    flex: 1;
  }
  .form-top--right {
    flex: 1;
  }
}
.form-bottom {
  display: flex;
  justify-content: flex-end;
}
</style>

// Form.vue

<template>
  <el-form>
    <Layout>
      <template v-for="item in Object.keys(slot)" :key="item" #[item]>
        <slot :name="item"></slot>
      </template>
    </Layout>
  </el-form>
</template>

<script setup lang="ts">
import Layout from "./Layout.vue";
const slot = useSlots();
</script>
<style lang="scss" scoped></style>

// index.vue

<template>
  <Form ref="formRef" :model="formData" label-width="80px">
    <template #left>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="請輸入姓名" />
      </el-form-item>
      <el-form-item label="年齡" prop="age">
        <el-input v-model="formData.age" placeholder="請輸入年齡" />
      </el-form-item>
      <el-form-item label="性別" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="郵箱" prop="email">
        <el-input v-model="formData.email" placeholder="請輸入郵箱" />
      </el-form-item>

      <el-form-item label="排序" prop="sort" placeholder="請輸入排序號">
        <el-input-number v-model="formData.sort" :min="1" />
      </el-form-item>
    </template>
    <template #right>
      <el-form-item label="備注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="請輸入備注"
          maxlength="100"
          show-word-limit
          resize="none"
        />
      </el-form-item>
      <el-form-item label="說明" prop="config">
        <el-input
          v-model="formData.config"
          placeholder="請輸入說明"
          type="textarea"
          show-word-limit
          maxlength="200"
          :autosize="{ minRows: 6, maxRows: 6 }"
        />
      </el-form-item>
    </template>
    <template #bottom>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">確 定</el-button>
        <el-button type="warning" @click="handleClose">取 消</el-button>
      </el-form-item>
    </template>
  </Form>
</template>

<script setup lang="ts">
import Form from "./Form.vue";
const formRef = ref();

//添加人員表單
const formData = reactive({
  remark: "",
  age: 10,
  config: "",
  email: "",
  sex: "",
  id: null,
  name: "",
  sort: 0,
});

const handleClose = () => {};
const handleSubmit = () => {};
</script>
<style lang="scss" scoped>
.form-top {
  display: flex;
  justify-content: space-between;
  .form-top--right {
    flex: 1;
  }
}
.form-bottom {
  display: flex;
  justify-content: flex-end;
}
</style>

6 總結(jié)

1. 布局和數(shù)據(jù)分離

2. 靈活擴展layout

2.1 可以建立多個layout文件，批量引入（或動態(tài)引入）Form.vue中，F(xiàn)orm.vue中利用動態(tài)組件component加載各個layout文件
2.2 可以建立多個layout文件，批量引入（或動態(tài)引入）LayoutIndex.vue文件中，LayoutIndex.vue文件利用動態(tài)組件component加載各個layout文件，然后Form.vue中只渲染LayoutIndex，同時通過傳參決定渲染那個layout

3. 新增layout時，只需要新增文件（所有l(wèi)ayout文件已經(jīng)被批量引入<或動態(tài)引入>），符合“開閉”原則

tip：