devbox
一键难忘520
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue项目-Table添加Form表单校验

作者：一键难忘520 | 2024-08-17 01:27:57

赞

踩

Vue项目-Table添加Form表单校验

一、HTML

  1. <template>
  2.   <div class="taskInfo">
  3.     <el-form
  4.       :model="generateParams"
  5.       :rules="formRules"
  6.       ref="formRef"
  7.       class="taskInfoForm"
  8.       label-width="100px">
  9.       <ul class="taskInfoSearch">
  10.         <li>
  11.           <el-form-item label="类型" prop="type">
  12.             <el-select
  13.               v-model="generateParams.type"
  14.               placeholder="请选择类型">
  15.               <el-option :value="1" label="aaa"></el-option>
  16.               <el-option :value="2" label="bbb"></el-option>
  17.             </el-select>
  18.           </el-form-item>
  19.         </li>
  20.         <li>
  21.           <el-form-item label="开始" prop="start">
  22.             <el-input
  23.               v-model="generateParams.start"
  24.               placeholder="请输入开始值"></el-input>
  25.           </el-form-item>
  26.         </li>
  27.         <li>
  28.           <el-form-item label="结束" prop="end">
  29.             <el-input
  30.               v-model="generateParams.end"
  31.               placeholder="请输入结束值"></el-input>
  32.           </el-form-item>
  33.         </li>
  34.         <li>
  35.           <el-form-item label="开始时间" prop="startTime">
  36.             <el-date-picker
  37.               v-model="generateParams.startTime"
  38.               type="datetime"
  39.               placeholder="请选择开始时间"
  40.               format="YYYY/MM/DD hh:mm:ss"
  41.               value-format="YYYY-MM-DD h:m:s" />
  42.           </el-form-item>
  43.         </li>
  44.         <li>
  45.           <el-form-item label="结束时间" prop="endTime">
  46.             <el-date-picker
  47.               v-model="generateParams.endTime"
  48.               type="datetime"
  49.               placeholder="请选择结束时间"
  50.               format="YYYY/MM/DD hh:mm:ss"
  51.               value-format="YYYY-MM-DD h:m:s" />
  52.           </el-form-item>
  53.         </li>
  54.       </ul>
  55.  
  56.       <div class="taskInfoAddBtn">
  57.         <el-button type="primary" @click="addRowData">新增表格数据</el-button>
  58.       </div>
  59.  
  60.       <div class="taskInfoTab">
  61.         <el-table
  62.           :data="generateParams.studentInfo"
  63.           :cell-class-name="cellClassName"
  64.           :row-class-name="rowClassName"
  65.           @cell-click="cellClick">
  66.           <el-table-column label="姓名">
  67.             <template #default="{ row, column }">
  68.               <el-form-item
  69.                 :prop="'studentInfo.' + row.index + '.name'"
  70.                 :rules="formRules.name"
  71.                 v-if="row.index == rowIndex && column.index == columnIndex">
  72.                 <el-input
  73.                   v-model.number="row.name"
  74.                   type="number"
  75.                   @blur="hideInput"
  76.                   v-focus></el-input>
  77.               </el-form-item>
  78.               <span v-else>{{ row.name }}</span>
  79.             </template>
  80.           </el-table-column>
  81.           <el-table-column label="年龄">
  82.             <template #default="{ row, column }">
  83.               <el-form-item
  84.                 :prop="'studentInfo.' + row.index + '.age'"
  85.                 :rules="formRules.age"
  86.                 v-if="row.index == rowIndex && column.index == columnIndex">
  87.                 <el-input
  88.                   v-model.number="row.age"
  89.                   type="number"
  90.                   @blur="hideInput"
  91.                   v-focus></el-input>
  92.               </el-form-item>
  93.  
  94.               <span v-else>{{ row.age }}</span>
  95.             </template>
  96.           </el-table-column>
  97.           <el-table-column label="性别">
  98.             <template #default="{ row, column }">
  99.               <el-form-item
  100.                 :prop="'studentInfo.' + row.index + '.sex'"
  101.                 :rules="formRules.sex"
  102.                 v-if="row.index == rowIndex && column.index == columnIndex">
  103.                 <el-input
  104.                   v-model.number="row.sex"
  105.                   type="number"
  106.                   @blur="hideInput"
  107.                   v-focus></el-input>
  108.               </el-form-item>
  109.  
  110.               <span v-else>{{ row.sex }}</span>
  111.             </template>
  112.           </el-table-column>
  113.           <el-table-column label="操作" width="100">
  114.             <template #default="{ row }">
  115.               <el-button type="danger" link @click="delRowData(row)"
  116.                 >删除</el-button
  117.               >
  118.             </template>
  119.           </el-table-column>
  120.         </el-table>
  121.       </div>
  122.     </el-form>
  123.  
  124.     <div class="generate">
  125.       <el-button type="primary" @click="generate(formRef)"
  126.         >任务信息生成</el-button
  127.       >
  128.     </div>
  129.  
  130.     <!-- 任务信息生成信息模态框 -->
  131.     <TaskInfoModel ref="TaskInfoModelRef"></TaskInfoModel>
  132.   </div>
  133. </template>

二、JS

  1. <script setup>
  2. // -------------------<<模块引入>>-------------------
  3. import { ref, reactive, onMounted, nextTick } from "vue";
  4. import { ElMessage } from "element-plus";
  5. // -------------------<<变量声明>>-------------------
  6. // 生成参数
  7. const generateParams = reactive({
  8.   type: 1, // 类型
  9.   start: 1000000000, // 开始
  10.   end: 2000000000, // 结束
  11.   startTime: "2024-08-05 15:33:55", // 开始时间
  12.   endTime: "2024-08-15 15:33:55", // 结束时间
  13.   studentInfo: [
  14.     // 任务区域
  15.     {
  16.       name: 123.1122331, // 姓名
  17.       age: 80.12345621, // 年龄
  18.       sex: 1200.1, // 性别
  19.     },
  20.     {
  21.       name: 114.1122331, // 姓名
  22.       age: 80.12345621, // 年龄
  23.       sex: 1200.1, // 性别
  24.     },
  25.     {
  26.       name: 114.1122331, // 姓名
  27.       age: 80.12345621, // 年龄
  28.       sex: 1200.1, // 性别
  29.     },
  30.   ],
  31. });
  32. // form表单规则
  33. const formRules = reactive({
  34.   type: [{ required: true, message: "请选择类型", trigger: "change" }],
  35.   start: [{ required: true, message: "请输入开始", trigger: "blur" }],
  36.   end: [{ required: true, message: "请输入结束", trigger: "blur" }],
  37.   startTime: [{ required: true, message: "请选择开始时间", trigger: "change" }],
  38.   endTime: [{ required: true, message: "请选择结束时间", trigger: "change" }],
  39.   name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  40.   age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
  41.   sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
  42. });
  43. // 获取form表单ref
  44. const formRef = ref();
  45. // 行列index
  46. const rowIndex = ref(null);
  47. const columnIndex = ref(null);
  48. // 是否允许编辑
  49. const isEdit = ref(true);
  50.  
  51. // -------------------<<函数定义>>-------------------
  52. // 生成
  53. const generate = (formEl) => {
  54.   if (!formEl) return;
  55.   formEl.validate((valid) => {
  56.     if (valid) {
  57.       console.log(generateParams);
  58.       TaskInfoModelRef.value.openWin();
  59.     } else {
  60.       console.log("error submit!");
  61.  
  62.       //当验证失败跳转到空白的所在区域
  63.       nextTick(() => {
  64.         let isError = document.getElementsByClassName("is-error");
  65.         isError[0].scrollIntoView({
  66.           // 滚动到指定节点
  67.           // 值有start,center,end，nearest
  68.           block: "center",
  69.           // 值有auto、instant,smooth，缓动动画
  70.           behavior: "smooth",
  71.         });
  72.       });
  73.  
  74.       return false;
  75.     }
  76.   });
  77. };
  78. // 表格单元格className回调方法
  79. const cellClassName = ({ column, columnIndex }) => {
  80.   column.index = columnIndex;
  81. };
  82. // 表格行className回调方法
  83. const rowClassName = ({ row, rowIndex }) => {
  84.   row.index = rowIndex;
  85. };
  86. // 表格单元格点击事件
  87. const cellClick = (row, column) => {
  88.   if (isEdit.value) {
  89.     rowIndex.value = row.index;
  90.     columnIndex.value = column.index;
  91.   }
  92. };
  93. // input框失去焦点事件
  94. const hideInput = (e) => {
  95.   if (e.target.value) {
  96.     rowIndex.value = null;
  97.     columnIndex.value = null;
  98.     isEdit.value = true;
  99.   } else {
  100.     isEdit.value = false;
  101.   }
  102. };
  103. // 新增数据
  104. const addRowData = () => {
  105.   generateParams.studentInfo.push({
  106.     name: "",
  107.     age: "",
  108.     sex: "",
  109.   });
  110. };
  111. // 删除本行数据
  112. const delRowData = (row) => {
  113.   if (generateParams.studentInfo.length > 1) {
  114.     generateParams.studentInfo.splice(row.index, 1);
  115.   } else {
  116.     ElMessage.warning("最少保留1条数据");
  117.   }
  118. };
  119. // -------------------<<函数执行>>-------------------
  120. onMounted(() => {});
  121. </script>

三、CSS

  1. <style lang="less" scoped>
  2. .taskInfo {
  3.   width: 100%;
  4.   height: 100%;
  5.  
  6.   :deep(.taskInfoForm) {
  7.     width: 100%;
  8.     height: calc(100% - 80px);
  9.  
  10.     .taskInfoSearch {
  11.       width: 100%;
  12.       height: 120px;
  13.       display: flex;
  14.       align-items: center;
  15.       flex-wrap: wrap;
  16.  
  17.       li {
  18.         width: 25%;
  19.         height: 50%;
  20.  
  21.         .el-form-item__label {
  22.           color: #fff;
  23.         }
  24.  
  25.         .el-form-item {
  26.           width: 100%;
  27.           height: 100%;
  28.           margin-bottom: 0px;
  29.           display: flex;
  30.           align-items: center;
  31.  
  32.           .el-date-editor.el-input,
  33.           .el-input,
  34.           .el-select {
  35.             width: 100% !important;
  36.           }
  37.         }
  38.       }
  39.     }
  40.  
  41.     .taskInfoAddBtn {
  42.       width: 100%;
  43.       height: 50px;
  44.       display: flex;
  45.       align-items: center;
  46.       justify-content: flex-end;
  47.     }
  48.  
  49.     .taskInfoTab {
  50.       width: 100%;
  51.       height: calc(100% - 170px);
  52.       position: relative;
  53.  
  54.       .el-table {
  55.         width: 100%;
  56.         height: 100%;
  57.         background: transparent !important;
  58.         position: absolute;
  59.  
  60.         .el-form-item {
  61.           width: 100%;
  62.           margin-bottom: 0px;
  63.  
  64.           .el-form-item__content {
  65.             margin-left: 0px !important;
  66.             display: flex;
  67.             align-items: center;
  68.             justify-content: center;
  69.  
  70.             .el-input,
  71.             .el-select {
  72.               width: 80% !important;
  73.             }
  74.           }
  75.         }
  76.  
  77.         td,
  78.         th {
  79.           text-align: center;
  80.         }
  81.       }
  82.     }
  83.   }
  84.  
  85.   .generate {
  86.     width: 100%;
  87.     height: 80px;
  88.     display: flex;
  89.     align-items: center;
  90.     justify-content: center;
  91.   }
  92. }
  93. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/990624
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号