form和table组件的应用

最新推荐文章于 2024-06-22 08:12:52 发布
最新推荐文章于 2024-06-22 08:12:52 发布
阅读量95 收藏
点赞数
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65792710/article/details/134419498
版权

 

<template>
  <div class="container"> 
        <div class="center-content">
              <el-form :rules="formRules" ref="form" :inline="true" :model="formInline" class="demo-form-inline">

                <el-row>
                  <el-col :span="12">
                        <el-form-item label="设备名称" prop="user">
                          <el-input v-model="formInline.user" placeholder="请输入设备名称" clearable />
                        </el-form-item>
                  </el-col>
                  <el-col :span="12">
                        <el-form-item label="所属部门" prop="region">
                          <el-select
                            v-model="formInline.region"
                            placeholder="请选择所属部门"
                            clearable
                          >
                            <el-option label="资讯科" value="资讯科" />
                            <el-option label="行政部" value="行政部" />
                          </el-select>
                        </el-form-item>
                  </el-col>
                </el-row>

                <el-row class="row-right">
                  <el-col :span="12">
                        <el-form-item label="归属人" prop="persion">
                            <el-select
                              v-model="formInline.persion"
                              placeholder="请选择归属人"
                              clearable 
                            >
                              <el-option label="吴德章" value="吴德章" />
                              <el-option label="田登响" value="田登响" />
                          </el-select>
                        </el-form-item>
                  </el-col>
                  <el-col :span="12">
                        <el-form-item label="设备状况" prop="state">
                          <el-select
                            v-model="formInline.state"
                            placeholder="请选择设备状态"
                            clearable
                          >
                            <el-option label="租用" value="租用" />
                            <el-option label="待归还" value="待归还" />
                          </el-select>
                        </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                          <el-form-item label="是否可租借">
                            <el-switch v-model="formInline.delivery" inline-prompt active-text="可以"></el-switch>
                          </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="购买时间" prop="date">
                      <el-date-picker
                        v-model="formInline.date"
                        type="date"
                        placeholder="请选择购买时间"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                          <el-form-item label="设备情况" prop="states">
                            <el-select
                              v-model="formInline.states"
                              placeholder="请选择设备情况"
                              clearable 
                            >
                              <el-option label="可用" value="可用" />
                              <el-option label="故障" value="故障" />
                            </el-select>
                          </el-form-item>
                  </el-col>
                  <el-col :span="12">
                          <el-form-item label="设备类型" prop="type">
                            <el-select
                              v-model="formInline.type"
                              placeholder="请选择设备类型"
                              clearable
                            >
                              <el-option label="支架" value="支架" />
                              <el-option label="电脑" value="电脑" />
                            </el-select>
                          </el-form-item>
                  </el-col>
                </el-row>


                <el-row style="padding-left: 10px;">
                  <el-col :span="12">
                 <!-- 上传照片 -->
                            <el-form-item label="设备图片">

                              <el-upload
                                class="avatar-uploader"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                              >
                                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                              </el-upload>
                            </el-form-item>
                  </el-col>
                  <el-col :span="12">
                          <el-form-item label="设备描述">
                            <el-input :autosize="{ minRows: 5, maxRows: 3 }" style="width: 220px;" placeholder="请描述设备详情" v-model="formInline.desc" type="textarea" />
                          </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="配件来源"> 
                      <el-button style="color: white; background-color: #2FBBC2;"  text @click="showAddAccessoriesDialog">添加配件</el-button>
                      <el-button style="color: white; background-color: #2FBBC2;" >添加闲置配件</el-button> 
                    </el-form-item>
                  </el-col>
                </el-row>
             
                <el-row>
                  <el-col :span="30">
                    <el-form-item label="设备列表"> 
                      <el-table 
                      :data="tableData"
                      :header-cell-style="{
                        'text-align': 'center',
                        'font-size': '16px',
                        'background-color': '#f5f5f5 !important',
                        'border': '1px solid #EBEEF5 !important'
                      }"
                       style="width:560px;" >
                          <el-table-column prop="date" label="配件名" width="115" />
                          <el-table-column prop="name" label="配件情况" width="115" />
                          <el-table-column prop="state" label="购买时间" width="115" />
                          <el-table-column prop="city" label="配件说明" width="115" />
                          <el-table-column prop="zip" label="配件描述" width="120" />
                          <el-table-column fixed="right" label="操作" width="80">
                            <template #default>
                              <el-button link type="primary" size="small" @click="handleClick"
                                >删除</el-button>
                            </template>
                          </el-table-column>
                      </el-table>
                    </el-form-item>
                  </el-col>
                </el-row>

                 <el-row class="row-button">
                   <el-col :span="30">
                    <el-form-item>
                      <el-button @click="onReset">取消</el-button>
                      <el-button style="color: white; background-color: #2FBBC2;" @click="onSubmit">确认</el-button>
                    </el-form-item>
                  </el-col>
                 </el-row>
                



            </el-form>

            <!-- 弹框 -->
            <el-dialog
                title="添加配件"
                v-model="dialogFormVisible"
                width="20%"
              >
              <el-form :model="forms" :rules="fromsRules"  ref="formDialog">
                <el-row >
                      <el-col :span="60">
                        <el-form-item label="配件名称"  prop="name">
                            <el-input class="inputop" placeholder="请输入配件名"  v-model="forms.name" autocomplete="off" />
                        </el-form-item>

                        <el-form-item label="配件状态"  prop="region">
                            <el-select class="inputop" v-model="forms.region" placeholder="请选择配件状态">
                                  <el-option label="租用" value="租用" />
                                  <el-option label="待归还" value="待归还" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="购买时间" prop="date">
                          <el-date-picker
                          class="inputop"
                          v-model="forms.date"
                            type="date"
                            value-format="YYYY-MM-DD"
                            placeholder="请选择购买时间"
                            clearable
                          />
                        </el-form-item>

                        <el-form-item label="配件标签"  prop="them">
                            <el-select class="inputop" v-model="forms.them" placeholder="请选择配件标签">
                                  <el-option label="标签1" value="标签1" />
                                  <el-option label="标签2" value="标签2" />
                            </el-select>
                        </el-form-item>

                        <el-form-item class="texta" label="配件描述">
                            <el-input  class="inputop" placeholder="请对配件进行描述" v-model="forms.desc" type="textarea" />
                        </el-form-item>

                      </el-col>
                </el-row>

            </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button  style="color: white; background-color: #2FBBC2;"  @click="handleAddAccessories">
                    确认
                  </el-button>
                </span>
              </template>
              

            </el-dialog>

      </div>
  </div>
</template>

<script setup>
import { reactive, ref} from 'vue'
import { Plus } from '@element-plus/icons-vue'  


const dialogFormVisible = ref(false);  // 控制弹窗显示和隐藏
const showAddAccessoriesDialog = () => {
dialogFormVisible.value = true;
};
const forms = reactive({
name: '',
region: '',
date: '',
them: '',
desc: '',
})
const fromsRules = {
name: [{ required: true, message: '请输入配件名', trigger: 'blur' }],
region:[{required: true, message: '请选择配件状态', trigger: 'change' }],
date:[{required: true, message: '请选择购买时间', trigger: 'change'}],
them:[{required: true, message: '请选择配件标签', trigger: 'change'}],
}


// table
const tableData = ref([
{ date: '推土机', name: '租用', state: '2023-11-16', city: '标签1',zip:'1212' },

]);
const handleClick = () => {
console.log('click')
}
const handleAddAccessories = () => {
// 将 el-dialog 中的数据添加到 tableData 中
  tableData.value.push({
    date: forms.name,
    name: forms.region,
    state: forms.date,
    city: forms.them,
    zip:forms.desc,
});

// 关闭 el-dialog
dialogFormVisible.value = false;
};

const formRef = ref(null)
const formRules = {
user: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
region: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
persion:[{required: true, message: '请选择归属人', trigger: 'change' }],
date:[{required: true, message: '请选择购买时间', trigger: 'change'}],
state:[{required: true, message: '请选择设备状态', trigger: 'change'}],
states:[{required: true, message: '请选择设备情况', trigger: 'change'}],
type:[{required: true, message: '请请选择设备类型', trigger: 'change'}]
}

const formInline = reactive({
user: '',
region: '',
persion:'',
date: '',
delivery:true,
states:'',
state:'',
type:'',
desc:''
})
const onSubmit = () => {
formRef.value.validate((valid) => {
  if (valid) {
    console.log('submit!')
  } else {
    console.log('error submit!')
    return false
  }
})
}

const onReset = () => {
formRef.value.resetFields()
}


</script>
<style>

.el-dialog__body{
  border-top: 1px solid #8c939d;
  border-bottom: 1px solid #8c939d;
}

.texta{

  padding-left:10px;
}
.inputop{
width: 220px;
}
.container {
display: grid;
place-items: center;
/* height: 100vh;  */

}

.center-content {
 width: 40%;
 /* height: 40%; */
/* background-color:bisque ; */
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
}

.avatar-uploader .avatar {
width: 178px;
height: 178px;
display: block;


}
.avatar-uploader .el-upload {
/* border: 1px dashed var(--el-border-color); */
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 150px;
height: 120px;
text-align: center;
}
.demo-form-inline .el-input {
--el-input-width: 220px;

}
.row-right{
text-align: right;
}
/* .el-row{
background-color: #8c939d;
}
.el-col{
background-color:saddlebrown;
} */
.row-button{
/* text-align: right; */
display: flex;
justify-content: flex-end;
align-items: center;
/* background-color: #8c939d; */
}
</style>

#小裁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 高阶组件应用（一） 改善 antd Table组件的渲染效率
追逐丶的博客
07-22 3871
一、前言 对于react 高阶组件。大家基本只知道定义和用法，在实际开发中，使用的可能并不多。项目组下来一个任务，重写某个由Antd Table渲染为主要功能的模块，这里发现一些问题，Antd Table在渲染时，即使没有改变Table的props，只是改变包裹Table的组件，Table组件也会重新渲染。 二、问题产生 import { Table} from 'antd'; class TestRoot extends Component { change() { this.setState(
浅谈Vue内置component组件的应用场景
08-27
Vue 内置 component 组件的应用场景 在 Vue 框架中，内置的 component 组件是一种非常强大的工具，能够帮助开发者快速构建复杂的用户界面。下面将通过实践场景，深入浅出地探讨 Vue 内置 component 组件的应用场景...
element的el-form和el-table嵌套使用
热门推荐
ddx2019的博客
08-24 2万+
<template> <div> <el-form :model="addJsonForm" ref="addJsonForm" :rules="addJsonForm.addJsonRules" :inline="true" label-width="108px" > <el-table :data="addJsonForm.params" style="width: 10
小而美的 React Form 组件
simonguo2009的博客
09-09 1018
之间在一篇介绍过 Table 组件《React 实现一个漂亮的 Table》 的文章中讲到过，在企业级后台产品中，用的最多且复杂的组件主要包括 Table、 Form、 Chart，在处理 Table 的时候我们遇到了很多问题。今天我们这篇文章主要是分享一下 Form 组件，在业务开发中， 相对 Table 来说，Form 处理起来更麻烦，不是所有表单都像注册页面那样简单，它往往需要处理非常多的
iview table组件的嵌套使用
hello world
11-18 947
最近使用iview-admin写了一个后台管理项目，对table这个组件使用的比较多，表格主要内容如下图 新建和修改操作是使用iview组件 model（对话框）内嵌form（表单），可做表单验证 单选、多选、排序、分页、下拉都能通过官网iviewtable查到，这里有些操作用到render函数，我只介绍这些 时间戳转化，这是最简单的render函数的应用：首先需要引入momen...
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
在给定的文件中，展示了如何利用Element UI库来封装`el-table`和`el-form`组件，这两个组件在管理系统的界面中非常常见，特别是用于数据展示和表单提交。 首先，我们关注`el-form`组件的封装。`el-form`用于创建...
基于element-ui库进行二次封装，简化一些繁琐操作，核心理念为数据驱动视图,主要组件库针对table表格和form表单场景
05-31
Avue.js2.0是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，...
django form和field具体方法和属性说明
09-16
Django Form和Field是Django框架中用于处理用户输入数据的核心组件。它们使得构建Web表单变得简单且灵活。下面将详细介绍这两个概念以及它们的方法和属性。 **Django Form** Django Form是一个类，用于定义表单的...
tapestry hibernate Spring应用及组件的使用
06-30
tapestry hibernate Spring应用及组件的使用的一个简单完整例子，包含form组件、table组件的一个增删改查。其中数据库创建用户和表在docs里，数据库使用oracle
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
m0_73179389的博客
06-19 511
前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。计算文件的MD5值。
JS面试题第一章
2301_79858637的博客
06-19 292
undefined表示的是无的原始值。但是null表示的是无 对象 0。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 398
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
vue:对三种获取更新后的dom的方式进行分析
qq_45820271的博客
06-17 725
由于vue的异步更新机制，我们在同步代码中是无法获取到更新后的dom的信息的针对这个问题，我们有三种解决方案获取更新后的dom:3.在微任务中获取因为更新是在同步任务结束后，执行微任务之前，所以上面三种方式可以得到更新后的dom。
elementUI的table使用展开功能( type=“expand“ ),展开时合起上一次展开的内容,始终保持展开内容为一个,并且再次点击合起自身
weixin_54930261的博客
06-20 319
直接上代码了没什么可讲的,主要是用到。
【java】常见问题-自用
最新发布
qq_45852108的博客
06-22 146
【自用】java 知识点模糊地方
vue格网图
南北粉面馆
06-16 336
【代码】vue格网图。
elementui表格el-table最右侧操作列展示不完全
qq_46376192的博客
06-17 242
elementui表格el-table最右侧操作列展示不完全,有横线
Vue3中的常见组件通信（超详细版）
m0_63165331的博客
06-19 977
本文详细讲述了vue3中常用的组件通信使用方法。主要包括props、自定义事件、mitt、v-model、$attrs、$refs和$parent、probide和inject、pinia、插槽。
vue中el-table-column和el-form-item 区别以及state和table的区别
04-29
`el-table-column`和`el-form-item`是`Element-UI`组件库中用于构建表格和表单的组件，两者的作用和用途有所不同。 `el-table-column`是用于构建表格的列的组件，它的主要作用是定义表格的列属性，如列的标题、宽度、对齐方式、排序等。在`el-table`中使用`el-table-column`组件可以很方便地定义表格的列。 `el-form-item`是用于构建表单的表单项的组件，它的主要作用是定义表单项的属性，如表单项的标签、验证规则、尺寸等。在`el-form`中使用`el-form-item`组件可以很方便地定义表单的表单项。 `state`是`Vue.js`中用于存储数据的对象，它的主要作用是管理应用程序的状态。`state`对象中存储的数据可以被组件共享和访问，从而实现不同组件之间的数据交互和共享。 `el-table`和`state`是不同的概念。`el-table`是用于构建表格的组件，它的主要作用是展示数据。`state`是用于存储数据的对象，它的主要作用是管理数据。在`Vue.js`中，我们可以使用`state`对象来管理表格中的数据，并在`el-table`中使用这些数据来展示表格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值