修改表格

src/components/Table/index.vue

@@ -5,7 +5,7 @@
         <el-button size="small" @click="handleAdd" plain type="primary">新增</el-button>
       </div>
       <template v-if="tableData.length">
-        <el-table :data="filteredTableData" :span-method="tableSpanMethod" stripe show-summary border ref="table" :height="minHeight - 8 + 'vh'" class="table" style="width: 100%; overflow: auto">
+        <el-table :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe show-summary border ref="table" :height="minHeight - 8 + 'vh'" class="table" style="width: 100%; overflow: auto">
           <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel">
             <template #header>
               <span class="colTips">
@@ -33,10 +33,14 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column fixed="right" label="操作" width="100">
+          <el-table-column fixed="right" label="操作" width="130">
             <template slot-scope="scope">
-              <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
-              <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">删除</el-button>
+              <div class="hd-td">
+                <div class="hd-tr">
+                  <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
+                  <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">删除</el-button>
+                </div>
+              </div>
             </template>
           </el-table-column>
         </el-table>
@@ -55,13 +59,15 @@
               <el-row :gutter="20">
                 <el-col v-for="(item, index) in tableColsCopy" :key="index" :span="rows">
                   <el-form-item :label="item.columnLabel">
-                    <!-- <template v-if="
-                        item.dataType == 'longtext' ||
-                        item.dataType.includes('int')
-                      ">
+                    <template v-if="item.listqueryTemplateID || item.listqueryTemplateID == 0">
+                      <el-select size="small" clearable style="width:100%" v-model="tableForm[item.columnName]" placeholder="请选择">
+                        <el-option v-for="item in tableOptions[item.columnName]" :key="item.v" :label="item.k" :value="item.v">
+                        </el-option>
+                      </el-select>
+                    </template>
+                    <template v-else>
                       <el-input size="small" v-model="tableForm[item.columnName]"></el-input>
-                    </template> -->
-                    <el-input size="small" v-model="tableForm[item.columnName]"></el-input>
+                    </template>
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -150,6 +156,7 @@ export default {
       tableForm: {}, //弹框表单
       rmTitle: "", //弹框-删除-标题
       tableObj: {}, //增/删/改数据缓存
+      tableOptions: {} //弹框-下来数据缓存
     };
   },
   computed: {
@@ -246,16 +253,31 @@ export default {
       this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
       this.tableDataCopy = _.cloneDeep(this.tableData);
       const datas = _.cloneDeep(this.tableColsCopy);
-      datas.forEach((item) => {
+      datas.forEach(async (item) => {
         this.tableDataFilters[item.columnName] = [];
         if (item.needGroup) {
           this.tableGroups.push(item.columnName);
         }
+        if (item.listqueryTemplateID || item.listqueryTemplateID == 0) {
+          this.tableOptions[item.columnName] = await this.getSelectData(item.listqueryTemplateID)
+        }
         // this.filterValues[item.columnName] = ''
       });
       setTableFilters(this.tableData, this.tableDataFilters);
       this.tableGroup(this.tableData);
     },
+    //获取弹框-下拉数据
+    async getSelectData (id) {
+      const { code, returnData } = await Query({
+        id,
+        dataContent: [],
+      });
+      if (code == 0) {
+        return returnData.listValues
+      } else {
+        return []
+      }
+    },
     //分组
     tableGroup (tableData) {
       const spanArr = [];
@@ -294,6 +316,30 @@ export default {
         };
       }
     },
+    //合计
+    getSummaries (param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        this.tableColsCopy.forEach(p => {
+          if (column.property == p.columnName && p.needCount) {
+            const values = data.map(item => Number(item[column.property]));
+            if (!values.every(value => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr);
+                if (!isNaN(value)) {
+                  return prev + curr;
+                } else {
+                  return prev;
+                }
+              }, 0);
+              sums[index] += '';
+            }
+          }
+        })
+      });
+      return sums;
+    },
     //弹框-确定
     handleOk () {
       this.submitClickHandler();
@@ -308,6 +354,7 @@ export default {
       this.tableType = "add";
       this.tableTitle = "新增";
       this.tableForm = {};
+      console.log(this.tableOptions)
     },
     //表格-编辑
     handleEdit (row) {
@@ -411,7 +458,7 @@ export default {
       align-items: center;
       justify-content: center;
       float: left;
-      margin-right: 2px;
+      margin: 0 7px;
       span {
         color: #2d67e3;
       }
@@ -436,6 +483,10 @@ export default {
         }
       }
     }
+    .hd-td {
+      display: flex;
+      justify-content: center;
+    }
   }
   .data-table-btn {
     margin-bottom: 20px;