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

效果

java 复制代码
<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-picker
              v-model="estimatedCompletionTime"
              type="date"
              placeholder="Pick a day"
              style="width: 200px"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      fit
      highlight-current-row
      header-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>
相关推荐
风流 少年3 分钟前
Cursor创建Spring Boot项目
java·spring boot·后端
wáng bēn11 分钟前
【java17】使用 Word 模板导出带替换符、动态表格和二维码的文档
java·word·itextpdf
全栈凯哥1 小时前
16.Spring Boot 国际化完全指南
java·spring boot·后端
M1A11 小时前
Java集合框架深度解析:LinkedList vs ArrayList 的对决
java·后端
Top`2 小时前
Java 泛型 (Generics)
java·开发语言·windows
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ2 小时前
如何使用Java WebSocket API实现客户端和服务器端的通信?
java·开发语言·websocket
是小崔啊2 小时前
tomcat源码02 - 理解Tomcat架构设计
java·tomcat
没有bug.的程序员2 小时前
JAVA面试宝典 -《安全攻防:从 SQL 注入到 JWT 鉴权》
java·安全·面试
栈溢出了2 小时前
MyBatis实现分页查询-苍穹外卖笔记
java·笔记·mybatis
morningcat20183 小时前
java17 gc笔记
java·jvm·笔记