El-Plus-Crud

Appearance

Form 表单 ​

模态表单 ElPlusFormDialog ​

开发过程中会遇到很多新增 / 编辑类型的模态弹框的表单，虽然 Element Plus 已然提供了 el-dialog 组件，但是这里为了更简便，所以作者封装了 ElPlusFormDialog 组件。

代码示例
vue
<ElPlusFormBtn :desc="btnDesc" />
<ElPlusFormDialog v-model:show="isShowDialog" v-model="formData" v-bind="formConfig" title="新增用户" />

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
const isShowDialog = ref(false)
const btnDesc = {
  label: '新增用户',
  type: 'primary',
  mask: true,
  on: {
    click: ({ callBack }) => {
      isShowDialog.value = true
      callBack(1000)
    }
  }
}
let formData = reactive({} as any)
const formConfig = ref({
  formDesc: {
    account: { type: 'input', label: '账号', maxlength: 10, required: true },
    name: { type: 'input', label: '昵称', maxlength: 10, required: true },
    pwd: { type: 'password', label: '密码', required: true },
    enabled: { type: 'switch', label: '启用状态', default: 1 }
  } as IFormDesc
} as IFormConfig)
</script>
<ElPlusFormBtn :desc="btnDesc" />
<ElPlusFormDialog v-model:show="isShowDialog" v-model="formData" v-bind="formConfig" title="新增用户" />

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
const isShowDialog = ref(false)
const btnDesc = {
  label: '新增用户',
  type: 'primary',
  mask: true,
  on: {
    click: ({ callBack }) => {
      isShowDialog.value = true
      callBack(1000)
    }
  }
}
let formData = reactive({} as any)
const formConfig = ref({
  formDesc: {
    account: { type: 'input', label: '账号', maxlength: 10, required: true },
    name: { type: 'input', label: '昵称', maxlength: 10, required: true },
    pwd: { type: 'password', label: '密码', required: true },
    enabled: { type: 'switch', label: '启用状态', default: 1 }
  } as IFormDesc
} as IFormConfig)
</script>

插槽的使用方法 ​

如果想要对模态表单进行扩展运用，可以使用插槽。针对模态框可以使用 header 和 footer 插槽，针对模态框表单可以使用 top 和 default 插槽。

代码示例
html
<div class="demo">
  <ElPlusFormBtn :desc="btn2Desc" />
  <ElPlusFormDialog v-model:show="isShow2Dialog" v-model="formData" v-bind="form2Config" title="新增用户">
    <template #header>
      <div>这里是模态框顶部的 title 插槽</div>
    </template>
    <template #top>
      <div style="border: 1px solid var(--vp-c-brand); margin-bottom: 12px; padding: 12px;">这里是模态表单内容的 top 插槽</div>
    </template>
    <template #default>
      <div style="border: 1px solid var(--vp-c-brand); margin-bottom: 12px; padding: 12px;">
        这里是模态表单内容的 default 插槽
        <ElPlusTable v-model="table1Data" :tableConfig="tableConfig" :isPager="false"></ElPlusTable>
      </div>
    </template>
    <template #footer>
      <div>
        这里是模态框底部的 footer 插槽
        <el-button @click="isShow2Dialog = false">关闭</el-button>
        <el-button @click="isShow2Dialog = false" type="warning">再想想</el-button>
        <el-button @click="isShow2Dialog = false" type="primary">提交</el-button>
      </div>
    </template>
  </ElPlusFormDialog>
</div>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'

  const isShowDialog = ref(false)
  // 按钮配置信息
  const btnDesc = {
    label: '新增用户',
    type: 'primary',
    mask: true,
    on: {
      click: ({ callBack }) => {
        isShowDialog.value = true
        callBack(1000)
      }
    }
  }

  // 表单信息
  let formData = reactive({} as any)
  const formConfig = ref({
    formDesc: {
      account: { type: 'input', label: '账号', maxlength: 10, required: true },
      name: { type: 'input', label: '昵称', maxlength: 10, required: true },
      pwd: { type: 'password', label: '密码', required: true },
      enabled: { type: 'switch', label: '启用状态', default: 1 }
    } as IFormDesc
  } as IFormConfig)

  // 表格信息
  let tableData = reactive([
    { id: 1, name: '张三', sex: 1, age: 55, address: '北京XXXX' },
    { id: 2, name: '李四', sex: 0, age: 24, address: '深圳XXXX' },
    { id: 3, name: '王五', sex: 1, age: 41, address: '上海XXXX' }
  ])
  const tableConfig = ref({
    column: [
      { prop: 'name', label: '名字' },
      { prop: 'sex', label: '性别', format: 'formatSex' },
      { prop: 'age', label: '年龄' },
      { prop: 'address', label: '地址' }
    ]
  } as ITableConfig)
</script>
<div class="demo">
  <ElPlusFormBtn :desc="btn2Desc" />
  <ElPlusFormDialog v-model:show="isShow2Dialog" v-model="formData" v-bind="form2Config" title="新增用户">
    <template #header>
      <div>这里是模态框顶部的 title 插槽</div>
    </template>
    <template #top>
      <div style="border: 1px solid var(--vp-c-brand); margin-bottom: 12px; padding: 12px;">这里是模态表单内容的 top 插槽</div>
    </template>
    <template #default>
      <div style="border: 1px solid var(--vp-c-brand); margin-bottom: 12px; padding: 12px;">
        这里是模态表单内容的 default 插槽
        <ElPlusTable v-model="table1Data" :tableConfig="tableConfig" :isPager="false"></ElPlusTable>
      </div>
    </template>
    <template #footer>
      <div>
        这里是模态框底部的 footer 插槽
        <el-button @click="isShow2Dialog = false">关闭</el-button>
        <el-button @click="isShow2Dialog = false" type="warning">再想想</el-button>
        <el-button @click="isShow2Dialog = false" type="primary">提交</el-button>
      </div>
    </template>
  </ElPlusFormDialog>
</div>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'

  const isShowDialog = ref(false)
  // 按钮配置信息
  const btnDesc = {
    label: '新增用户',
    type: 'primary',
    mask: true,
    on: {
      click: ({ callBack }) => {
        isShowDialog.value = true
        callBack(1000)
      }
    }
  }

  // 表单信息
  let formData = reactive({} as any)
  const formConfig = ref({
    formDesc: {
      account: { type: 'input', label: '账号', maxlength: 10, required: true },
      name: { type: 'input', label: '昵称', maxlength: 10, required: true },
      pwd: { type: 'password', label: '密码', required: true },
      enabled: { type: 'switch', label: '启用状态', default: 1 }
    } as IFormDesc
  } as IFormConfig)

  // 表格信息
  let tableData = reactive([
    { id: 1, name: '张三', sex: 1, age: 55, address: '北京XXXX' },
    { id: 2, name: '李四', sex: 0, age: 24, address: '深圳XXXX' },
    { id: 3, name: '王五', sex: 1, age: 41, address: '上海XXXX' }
  ])
  const tableConfig = ref({
    column: [
      { prop: 'name', label: '名字' },
      { prop: 'sex', label: '性别', format: 'formatSex' },
      { prop: 'age', label: '年龄' },
      { prop: 'address', label: '地址' }
    ]
  } as ITableConfig)
</script>

TIP

模态表单暂时不支持使用自定义配置 Events 事件，如果要处理模态框的打开 / 关闭等回调，请使用官方的<el-dialog></el-dialog> 组件，望悉知！！

API 属性 ​

这里只列举除官方组件以外的属性，官网属性参考 官网 Dialog API

formConfig 属性说明 ​

参考 FormConfig API

插槽 ​