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

news2024/9/24 19:15:16

效果

在这里插入图片描述

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2093481.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【STM32H743】将全局变量定义到指定内存MDK

STM32H743将全局变量定义到指定内存MDK 2024年8月31日 #elecEngeneer 上链 参考硬汉嵌入式。 这样Target里面的设置就作废了。 把H743的几个SRAM写上 ; ************************************************************* ; *** Scatter-Loading Description File generated by…

5G智慧工地项目汇报方案

1. 项目概述 5G智慧工地项目旨在通过5G技术提升建筑工地的通信、安防、质量管理和精益化管理水平&#xff0c;打造科技感十足的“5G智慧建造体验中心”。 2. 智慧工地需求 当前智慧工地需求集中在实时化、可视化、多元化、智慧化和便捷化&#xff0c;以满足全时段安全管理和…

《机器学习》周志华-CH4(决策树)

4.1基本流程 决策树是一类常见的机器学习方法&#xff0c;又称“判别树”&#xff0c;决策过程最终结论对应了我们所希望的判定结果。 一棵决策树 { 一个根结点 包含样本全集 若干个内部结点 对应属性测试&#xff0c;每个结点包含的样本集合根据属性测试结果划分到子结点中 若…

基于ssm+vue的汽车租赁管理系统

摘要 随着移动应用技术的发展&#xff0c;越来越多的用户借助于移动手机、电脑完成生活中的事务&#xff0c;许多的传统行业也更加重视与互联网的结合&#xff0c;以提高商家知名度和寻求更高的经济利益。针对传统汽车租赁系统&#xff0c;租赁信息、续租信息等问题&#xff0c…

第4章-07-将WebDriver获取的Cookie传递给Requests

🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年CSDN全站百大博主。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 🏆本文已收录于专栏:Web爬虫入门与实战精讲,后续完整更新内容如下。 文章…

linux下基本指令(持续更新)

目录 1.adduser 2.passwd 3.userdel 4. su - 5.ls 6.pwd ​编辑 7.cd 8.touch 9.mkdir &#x1f680; 10. rmdir && rm &#x1f680; 11.whoami &#xff08;who am i) 12.clear 13.tree (需要安装 yum install -y tree) 14.who 1.adduser 语法&…

TCP协议(1)

目录 一、TCP协议介绍 二、TCP协议格式 2.1、解包与分用 2.2、TCP的可靠性 2.3、TCP的工作模式 2.4、确认应答(ACK)机制 2.5、32位序号与确认序号 2.6 16位窗口大小 2.7 六个标志位 2.7.1、SYN 2.7.2、FIN 2.7.3、ACK 2.7.4、PSH 2.7.5、URG 2.7.6、RST 2.8、T…

Arco Voucher - 不知道有什么用的凭证单据录入表单插件

关于 Arco Voucher Arco Voucher 插件是一款不知道有什么用的凭证单据录入表单插件&#xff0c;可能只是为了看着像传统的凭证单据。 动态表头 附件上传/预览 添加凭证明细 https://apps.odoo.com/apps/modules/browse?authorzerone40 如有插件定制化需求或其他插件资源…

MATLAB智能优化算法-学习笔记(2)——变邻域搜索算法求解旅行商问题【过程+代码】

旅行商问题 (TSP) 旅行商问题(Traveling Salesman Problem, TSP)是经典的组合优化问题之一。问题的描述是:给定若干个城市以及每对城市之间的距离,一个旅行商需要从某个城市出发,访问每个城市恰好一次,最后回到出发城市,目标是找到一条总距离最短的环路。TSP 是 NP-har…

通用 PDF OCR 到 Word API 数据接口

通用 PDF OCR 到 Word API 数据接口 文件处理&#xff0c;OCR&#xff0c;PDF 高可用图像识别引擎&#xff0c;基于机器学习&#xff0c;超精准识别率。 1. 产品功能 通用识别接口&#xff1b;支持中英文等多语言字符混合识别&#xff1b;formdata 格式 PDF 文件流传参&#xf…

MySql执行计划(Explain关键字详解)

文章目录 预备知识学习本内容的前提必须了解1.什么是Explain?2.如何使用Explain?3.explain字段详解3.1、ID字段(情况1)、id值不同:(情况2)、id值相同:(情况3)、id列为null:(情况4)、子查询优化后3.2、select_type字段:表示那个是主要的查询1.simmple:2.primary:3.derived:…

WeStorm(没有指向JVM)

##一直困扰了好久&#xff0c;之前打开IDEA会弹出这个&#xff1a; 然后重启IDEA就没弹出来了。但是的但是&#xff0c;最近打开WebStorm也弹出来这个&#xff0c;重启也解决不了&#xff0c;一开始以为是JDK的问题&#xff0c;但是检查了好几遍&#xff0c;发现都没问题&…

沉浸式体验Stability AI文生图、图生图、图片PS功能(中篇)

今天小李哥就来介绍亚马逊云科技推出的国际前沿人工智能模型平台Amazon Bedrock上的Stability Diffusion模型开发生成式AI图像生成应用&#xff01;本系列共有3篇&#xff0c;在上篇中我们学习了如何在亚马逊云科技控制台上体验该模型的每个特色功能&#xff0c;如文生图、图生…

Vue setup语法糖

未使用setup语法糖 <script lang"ts">export default {name: "App",setup() {let name "张三"let age 20function handleClick() {age 1}return {name,age,handleClick,}}} </script><template><div class"class&…

基于django+vue+uniapp的摄影竞赛小程序

开发语言&#xff1a;Python框架&#xff1a;djangouniappPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员主界面 教师管理 学…

open3d无法读取的obj点云文件处理方案

open3d无法读取的obj点云文件处理方案 open3d读取obj文件什么原因解决方案导入选择点云文件选择 file -> save->保存格式解决 数据下载 open3d读取obj文件 import open3d as o3dif __name__ __main__:# 读取obj文件mesh o3d.io.read_triangle_mesh(r/home/gj/gj/open3…

【DCVRP】元启发式算法进一步优化

为什么加入元启发式算法&#xff1f; DCVRP-IMGR的求解质量可以快速的达到10%之内&#xff0c;但在DCVRP_IMGR生成方案完成后至下一个动态事件发生之间存在一段时间&#xff0c;当动态事件发生的非常频繁&#xff0c;这段时间可能会非常短暂&#xff0c;然而动态事件发生得不是…

mmitmproxy 抓包工具使用

mitmproxy 抓包工具使用 前言 本章内容均来自&#xff0c;《Python3 网络爬虫开发实战》- 崔庆才&#xff0c;在学习过程中&#xff0c;遇到写问题故此记录一下 学习本文章前确保准备好如下内容&#xff1a; 安装并成功运行 mumu 安卓模拟器 mitmproxy 介绍 mitmproxy是一…

【小记】excel函数 vlookup,hyperlink,批量修改文件名称

统计是否缺少文件【hlook函数】&#xff0c;超链接到对应文件【hyperlink函数】&#xff0c;批量修改文件名称 统计是否缺少文件【hlook函数】step1&#xff1a;路径复制进表格step2&#xff1a;处理文件名称step3&#xff1a;使用vlookup函数 超链接到对应文件【hyperlink函数…

【MySQL】插入优化篇——(少量插入数据优化&批量插入数据load指令)

前言 大家好吖&#xff0c;欢迎来到 YY 滴MySQL系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C Linux的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…