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

Element UI Table实现可编辑表格+校验（行和行，列和列）_element table 可编辑

作者：AllinToyou | 2024-03-06 19:48:15

赞

踩

element table 可编辑

Table:

  1. <template>
  2.   <div class="as-details-section">
  3.     <span class="title">任务分解表</span>
  4.     <div class="as-detail-list">
  5.       <el-table
  6.         :data="tableData"
  7.         :row-key="getRowKeys"
  8.         border
  9.         style="width: 100%">
  10.         <el-table-column
  11.           prop="stageName"
  12.           label="阶段"
  13.           width="120">
  14.         </el-table-column>
  15.         <el-table-column
  16.           prop="taskName"
  17.           label="任务"
  18.           width="190">
  19.         </el-table-column>
  20.         <el-table-column
  21.           prop="planStartTime"
  22.           label="计划开始时间"
  23.           className="editable"
  24.           width="120">
  25.           <template slot-scope="{ row, column, $index }">
  26.             <table-date-picker
  27.               v-if="row.isTask && !row.isDisabled"
  28.               v-model="row.planStartTime"
  29.               :valueValid="row.planStartTimeValid"
  30.               :valueEmpty="row.planStartTimeEmpty"
  31.               @change="change(row, column, $index)"
  32.               @blur="onBlur(row, column)">
  33.             </table-date-picker>
  34.             <span v-else class="cell-value">{{row.planStartTime | dateFormat}}</span>
  35.           </template>
  36.         </el-table-column>
  37.         <el-table-column
  38.           prop="planEndTime"
  39.           label="计划结束时间"
  40.           className="editable"
  41.           width="120">
  42.           <template slot-scope="{ row, column, $index }">
  43.             <table-date-picker
  44.               v-if="row.isTask && !row.isDisabled"
  45.               v-model="row.planEndTime"
  46.               :valueValid="row.planEndTimeValid"
  47.               :valueEmpty="row.planEndTimeEmpty"
  48.               isEndDate
  49.               @change="change(row, column, $index)"
  50.               @blur="onBlur(row, column)">
  51.             </table-date-picker>
  52.             <span v-else class="cell-value">{{row.planEndTime | dateFormat}}</span>
  53.           </template>
  54.         </el-table-column>
  55.         <el-table-column
  56.           prop="actualStartTime"
  57.           label="实际开始"
  58.           className="editable"
  59.           width="120">
  60.           <template slot-scope="{ row, column, $index }">
  61.             <table-date-picker
  62.               v-if="row.isTask && !row.isDisabled"
  63.               v-model="row.actualStartTime"
  64.               :valueValid="row.actualStartTimeValid"
  65.               :valueEmpty="row.actualStartTimeEmpty"
  66.               :disabled="row.isActualDisabled"
  67.               :pickerOptions="pickerOptions"
  68.               @change="changeRealDate(row, column, $index)">
  69.             </table-date-picker>
  70.             <span v-else class="cell-value">{{row.actualStartTime | dateFormat}}</span>
  71.           </template>
  72.         </el-table-column>
  73.         <el-table-column
  74.           prop="actualEndTime"
  75.           label="实际结束"
  76.           className="editable"
  77.           width="120">
  78.           <template slot-scope="{ row, column, $index }">
  79.             <table-date-picker
  80.               v-if="row.isTask && !row.isDisabled"
  81.               v-model="row.actualEndTime"
  82.               :valueValid="row.actualEndTimeValid"
  83.               :valueEmpty="row.actualEndTimeEmpty"
  84.               :disabled="row.isActualDisabled"
  85.               :pickerOptions="pickerOptions"
  86.               isEndDate
  87.               @change="changeRealDate(row, column, $index)">
  88.             </table-date-picker>
  89.             <span v-else class="cell-value">{{row.actualEndTime | dateFormat}}</span>
  90.           </template>
  91.         </el-table-column>
  92.         <el-table-column
  93.           prop="projectWbsTaskResourceList"
  94.           label="资源及投入比例"
  95.           min-width="200">
  96.           <template slot-scope="{ row, column, $index }">
  97.             <table-person-picker
  98.               v-if="row.isTask && !row.isDisabled"
  99.               v-model="row.projectWbsTaskResourceList"
  100.               :projectWbsTrackId="row.id"
  101.               :valueEmpty="row.projectWbsTaskResourceListEmpty"
  102.               @change="percentChange(row, column, $index)"
  103.               @blur="onBlur(row, column)"
  104.             ></table-person-picker>
  105.             <span v-else class="cell-value">{{ resourceFormat(row.projectWbsTaskResourceList) }}</span>
  106.           </template>
  107.         </el-table-column>
  108.         <el-table-column
  109.           prop="planWorkHour"
  110.           label="预计工时（天）"
  111.           width="120">
  112.         </el-table-column>
  113.         <el-table-column
  114.           prop="actualWorkHour"
  115.           label="实际工时（天）"
  116.           width="120">
  117.         </el-table-column>
  118.         <el-table-column
  119.           prop="planWorkDay"
  120.           label="预计工期（天）"
  121.           width="120">
  122.         </el-table-column>
  123.         <el-table-column
  124.           prop="actualWorkDay"
  125.           label="实际工期（天）"
  126.           width="120">
  127.         </el-table-column>
  128.       </el-table>
  129.     </div>
  130.     <el-dialog
  131.       title="流转确认"
  132.       :visible.sync="dialogVisible"
  133.       :close-on-click-modal="false"
  134.       width="400px">
  135.       <el-row v-if="!isShowRollback">确认要流转至下一阶段吗？</el-row>
  136.       <el-row v-else>确认要流转至下一阶段吗？</el-row>
  137.       <span slot="footer" class="dialog-footer">
  138.         <el-button v-if="!isShowRollback" @click="dialogVisible = false">取 消</el-button>
  139.         <el-button v-if="isShowRollback" @click="promoteProject(true)">回滚至2分</el-button>
  140.         <el-button type="primary" @click="promoteProject()">确 定</el-button>
  141.       </span>
  142.     </el-dialog>
  143.   </div>
  144. </template>

TablePersonPicker:

  1. <template>
  2.   <div class="table-date-picker">
  3.     <div class="cell-content-wrap">
  4.       <span class="cell-content">{{displayValue}}</span>
  5.       <i
  6.         class="el-icon-edit-outline"
  7.         style="float: right"
  8.       ></i>
  9.     </div>
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14. import TablePersonPickerDialog from '@/components/projectManagement/TablePersonPickerDialog'
  15.  
  16. export default {
  17.   name: 'TablePersonPicker',
  18.   model: {
  19.     prop: 'value',
  20.     event: 'change'
  21.   },
  22.   props: {
  23.     value: {
  24.       type: Array,
  25.       default() {
  26.         return [];
  27.       }
  28.     },
  29.     valueValid: {
  30.       type: Boolean,
  31.       default() {
  32.         return true;
  33.       }
  34.     },
  35.     valueEmpty: {
  36.       type: Boolean,
  37.       default() {
  38.         return false;
  39.       }
  40.     },
  41.     disabled: {
  42.       type: Boolean,
  43.       default() {
  44.         return false;
  45.       }
  46.     },
  47.     projectWbsTrackId: {
  48.       type: String,
  49.       default() {
  50.         return null;
  51.       }
  52.     }
  53.   },
  54.   data() {
  55.     return {
  56.       newValue: [],
  57.       displayValue: '',
  58.       pencentArr: []
  59.     };
  60.   },
  61.   mounted() {
  62.     // 点击表格td，编辑状态，输入框获取焦点
  63.     this.$el.parentNode.parentNode.onclick = () => {
  64.       if (!this.disabled) {
  65.         this.showDialog();
  66.       }
  67.     }
  68.   },
  69.   methods: {
  70.     showDialog() {
  71.       this.$utils.create(TablePersonPickerDialog, {
  72.         context: this,
  73.         keyName: this.id,
  74.         deliveryDept: this.options,
  75.         value: this.value
  76.       });
  77.     },
  78.     confirm(data) {
  79.       this.pencentArr = data;
  80.       this.displayValue = this.formatDisaplyValue();
  81.       this.$emit('change', this.pencentArr);
  82.     },
  83.     getItemById(personId) {
  84.       let item = null;
  85.       // 新增人员
  86.       for (const obj of this.data) {
  87.         if (obj.personId === personId) {
  88.           item = obj;
  89.           break;
  90.         }
  91.       }
  92.       return item;
  93.     },
  94.     formatDisaplyValue() {
  95.       const displayArr = [];
  96.       for (const item of this.pencentArr) {
  97.         displayArr.push(`${item.personLabel}(${item.inputPercentage}%)`)
  98.       }
  99.       return displayArr.join('，');
  100.     },
  101.     formatOptions() {
  102.       const optons = [];
  103.       let option = null;
  104.       for (const item of this.$store.state.DICT_DATA.delivery_dept) {
  105.         option = {
  106.           id: item.dictValue,
  107.           personLabel: item.dictName,
  108.           disabled: true
  109.         };
  110.         optons.push(option);
  111.       }
  112.       return optons;
  113.     }
  114.   },
  115.   created() {
  116.     this.options = this.formatOptions();
  117.     let template = null;
  118.     for (const item of this.value) {
  119.       this.newValue.push(item.personId);
  120.       template = {
  121.         personId: item.personId,
  122.         projectWbsTrackId: this.projectWbsTrackId,
  123.         inputPercentage: item.inputPercentage,
  124.         personLabel: item.personLabel
  125.       };
  126.       this.pencentArr.push(template);
  127.     }
  128.     this.displayValue = this.formatDisaplyValue();
  129.   },
  130.   watch: {
  131.     valueEmpty() {
  132.       if (this.valueEmpty) {
  133.         this.$el.parentNode.parentNode.style.background = '#FEF0F0';
  134.       } else {
  135.         this.$el.parentNode.parentNode.style.background = 'none';
  136.       }
  137.     },
  138.     valueValid() {
  139.       if (!this.valueValid) {
  140.         this.$el.parentNode.parentNode.style.background = '#FEF0F0';
  141.       } else {
  142.         this.$el.parentNode.parentNode.style.background = 'none';
  143.       }
  144.     }
  145.   }
  146. };
  147. </script>
  148. <style scoped lang="scss">
  149. .table-date-picker {
  150.   display: flex;
  151.   flex-flow: row;
  152.   align-items: center;
  153.   .cell-content-wrap {
  154.       display: flex;
  155.       flex-flow: row;
  156.       align-items: center;
  157.       i {
  158.         color: #20a0ff;
  159.         margin-left: 8px;
  160.         cursor: pointer;
  161.       }
  162.   }
  163.   .cell-content {
  164.     padding: 0 8px;
  165.     flex: 1;
  166.   }
  167. }
  168. </style>

输入校验：

  1.  
  2.     /**
  3.      * 表格预计开始时间和预计结束时间注册事件
  4.      */
  5.     change(row, column, $index) {
  6.       const { property } = column;
  7.       const value = row[property];
  8.       if ((!value || value === '') && value !== 0) {
  9.         row[`${property}Empty`] = true;
  10.       } else {
  11.         row[`${property}Empty`] = false;
  12.         // 时间发生变化，往下开始计算时间
  13.         this.calculatePlanDate(row, column, $index);
  14.         // 计算预计工时和预计工期
  15.         this.caculatePlanData();
  16.         // 任务预计开始时间小于任务结束时间
  17.         const isValid = this.validateDate(row.planStartTime, row.planEndTime);
  18.         if (!isValid) {
  19.           this.$message.error('预计结束时间必须大于等于预计开始时间！');
  20.         }
  21.         // 任务的预计开始时间大于上一个阶段的结束时间
  22.         const isStartDateValid = this.validateTaskStartDate(row, property, $index);
  23.         if (!isStartDateValid) {
  24.           this.$message.error('任务的预计开始时间和预计结束时间必须大于上一个阶段的预计结束时间');
  25.         }
  26.         if (isValid && isStartDateValid) {
  27.           row[`${property}Valid`] = true;
  28.         } else {
  29.           row[`${property}Valid`] = false;
  30.         }
  31.         this.$set(this.tableData, $index, Object.assign({}, row));
  32.       }
  33.     },

效果图：

 

 

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

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

  

闽ICP备14008679号