ElementPlus实现页面，上部分是表单，下部分是表格

本文主要是介绍ElementPlus实现页面，上部分是表单，下部分是表格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果

<template><el-dialog v-model="produceDialogFormVisible" draggable custom-class="dialog-title" :title="title" :close-on-click-modal="false"><el-form label-width="120px"><el-row :gutter="40"><el-col :span="12"><el-form-item label="需求单编号" ><el-input v-model="orderNo"/></el-form-item></el-col><el-col :span="12"><el-form-item label="预计交付时间"><el-date-pickerv-model="estimatedCompletionTime"type="date"placeholder="Pick a day"style="width: 200px"/></el-form-item></el-col></el-row></el-form><el-tableref="table"v-loading="listLoading":data="list"fithighlight-current-rowheader-cell-class-name="header-cell"><el-table-column type="selection" width="55" /><el-table-column type="index" width="50" /><el-table-column label="仓库" min-width="80px"><template #default="{row}"><span>{{ row.warehouseName }}</span></template></el-table-column><el-table-column label="产品名称" min-width="150px"><template #default="{row}">{{ getName(row.property) }}</template></el-table-column><el-table-column label="数量" min-width="200px"><template #default="{row}"><el-input-number v-model="row.number" :step="row.unitMinimum === '0' ? 0.01 : row.unitMinimum" step-strictly :min="0" :max="row.inventoryLimit" @change="handleChange"/><span style="line-height: 32px;margin-left: 5px">{{ row.unitName? row.unitName:'' }}</span></template></el-table-column><el-table-column label="单价" min-width="80px"><template #default="{row}"><span>{{ row.univalent }}</span></template></el-table-column><el-table-column label="小计" min-width="80px"><template #default="{row}"><span>{{ row.total }}</span></template></el-table-column><el-table-column label="操作" align="center" min-width="230" class-name="small-padding fixed-width"><template #default="{row}"><el-button size="small" plain icon="Delete" @click="handleDelete(row)">删除</el-button></template></el-table-column></el-table><template #footer><el-button @click="produceDialogFormVisible = false">取消</el-button><el-button v-permission="['biz:warningconfiguration:WarningConfiguration:update']" type="primary" :loading="loading" @click="createData()">确定</el-button></template><product-range-select ref="productRangeSelect" v-model="temp.productText" :range-option="rangeOption" /></el-dialog>
</template>

这篇关于ElementPlus实现页面，上部分是表单，下部分是表格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---