新增商品页-table动态增珊行列

src/components/tableCompontent/TableColumn.vue

@@ -23,6 +23,19 @@
         </template>
       </TableColumn>
     </template>
+
+
+    <!-- 自定义表头 -->
+    <template slot="header" slot-scope="scope">
+      <div v-if="itemCol.headerIcon" style="display: flex;align-items: center;justify-content: center;">
+        {{ itemCol.label }}<i @click="delColumn((scope.$index))" style="font-size: 25px;" :class="itemCol.headerIcon"></i>
+      </div>
+      <div v-else style="display: flex;align-items: center;justify-content: center;">
+        {{ itemCol.label }}
+      </div>
+    </template>
+
+
     <template slot-scope="scope">
       <!-- 操作列 -->
       <div v-if="itemCol.prop == 'operation'">
@@ -97,7 +110,7 @@
         <span>{{scope.row[itemCol.prop.split(',')[0]] || '--'}}{{scope.row[itemCol.prop.split(',')[1]]}}</span>
       </div>
       <!-- 表格可编辑列 -->
-      <div v-else-if="itemCol.type == 'editItem'">
+      <div v-else-if="itemCol.type == 'editItem'" style="display: flex;align-items: center;">
         <el-input
           @change="editItemChange(scope.row, itemCol)"
           v-if="itemCol.tag == 'input'"
@@ -121,6 +134,7 @@
         <el-select v-if="itemCol.tag == 'select'" v-model="scope.row[itemCol.prop]" :disabled="isDisabled" clearable filterable placeholder="" size="small">
           <el-option v-for="(ele, idx) in itemCol.oprion" :key="idx" :label="ele[itemCol.optionLabel]" :value="ele[itemCol.optionValue]" />
         </el-select>
+        <i @click="delRow(scope.$index)" v-if="itemCol.icon" style="font-size: 25px;" :class="itemCol.icon"></i>
       </div>
       <!-- 链接跳转 -->
       <div v-else-if="itemCol.type == 'link'">
@@ -380,6 +394,13 @@ export default {
     editItemNumChange(val, itemCol) {
       this.$emit("editItemNumChange", val, itemCol);
     },
+    delRow(index){
+      this.$emit("delRow", index);
+    },
+    delColumn(index){
+      this.$emit("delColumn", index);
+    }
+
   },
 };
 </script>
@@ -421,10 +442,10 @@ export default {
 .text-disable {
   // padding-left: 12px;
 }
-
-.el-input,.el-input-number,.el-select{
-  width: 100%;
-  border: 1px solid #dedede;
-}
+//有自带的border
+// .el-input,.el-input-number,.el-select{
+//   width: 100%;
+//   border: 1px solid #dedede;
+// }
 </style>
 

src/components/tableCompontent/index.vue

@@ -33,6 +33,8 @@
         :isDisabled="isDisabled"
         @imgPreview="onPreview"
         @editItemChange="editItemChange"
+        @delColumn="delColumn"
+        @delRow="delRow"
       >
         <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
           <slot :name="slot" v-bind="scope" />
@@ -140,6 +142,12 @@ export default {
     editItemChange(val, itemCol) {
       this.$emit("editItemChange", val, itemCol);
     },
+    delRow(index){
+      this.$emit("delRow", index);
+    },
+    delColumn(index){
+      this.$emit("delColumn", index);
+    }
   },
 };
 </script>

src/views/pointsManagement/pointsMall/addOrEditOrDetail.vue

@@ -30,20 +30,21 @@
             <el-input v-model="formInline.name1" placeholder="请输入商品描述"></el-input>
           </el-form-item>
           <el-form-item label="商品详情描述" prop="name1">
-            <Tinymce :height="'230'" :width="'100%'" v-model="tiny.value"></Tinymce>
+            <Tinymce :height="'280px'" :width="'100%'" v-model="tiny.value"></Tinymce>
           </el-form-item>
         </div>
         <div class="titleInfo">售卖信息</div>
         <div style="padding:0 20px;">
           <el-form-item label="规格">
-            <el-button type="primary" size="small" plain @click="dialogVisibleSpec=true" style="margin-bottom: 15px;">编辑</el-button>
-            <tableCompontent :border="true" ref="tableRef" :tableData="list1" :columnData="columnData1">
+            <el-button type="primary" size="small" plain @click="dialogVisibleSpec = true"
+              style="margin-bottom: 15px;">编辑</el-button>
+            <tableCompontent :border="true" ref="tableRef1" :tableData="list1" :columnData="columnData1">
             </tableCompontent>
           </el-form-item>
           <el-form-item label="规格明细">
             <DictSelect v-model="formInline.name1" :dictOptions="navigateMenuOption" placeholder="请选择"
               style="margin-bottom: 15px;" />
-            <tableCompontent :border="true" ref="tableRef" :tableData="list1" :columnData="columnData1">
+            <tableCompontent :border="true" ref="tableRef3" :tableData="list1" :columnData="columnData1">
             </tableCompontent>
           </el-form-item>
         </div>
@@ -69,12 +70,21 @@
       </el-form>
     </div>
 
-    <el-dialog center title="规格设置" width="55%" :append-to-body="true" :destroy-on-close="true"
+    <el-dialog center title="规格设置" width="80%" :append-to-body="true" :destroy-on-close="true"
       :visible.sync="dialogVisibleSpec" append-to-body :close-on-click-modal="false">
-      <div style="overflow-y: auto;height:30vh">
+      <div>
+        <div style="display: flex;width: 100%;">
+          <div style="width: 99.9%;">
+            <tableCompontent :maxHeight="'600px'" @delColumn="delColumn" @delRow="delRow" :border="true" ref="tableRef3" :tableData="list2" :columnData="columnData2">
+            </tableCompontent>
+          </div>
+          <i @click="addColumn" style="font-size: 25px;" class="el-icon-circle-plus-outline"></i>
+        </div>
+        <i @click="addRow" style="font-size: 25px;" class="el-icon-circle-plus-outline"></i>
+        <!-- 操作按钮 -->
         <div style="display: flex;justify-content: center;margin-top: 25px;">
-          <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="dialogVisible = false">保存</el-button>
+          <el-button @click="dialogVisibleSpec = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisibleSpec = false">保存</el-button>
         </div>
       </div>
 
@@ -97,7 +107,7 @@ export default {
   },
   data() {
     return {
-      dialogVisibleSpec:false,
+      dialogVisibleSpec: false,
       checkedCities: [],
       cLdList: [
         { cdescribe: '假一赔十' },
@@ -164,10 +174,21 @@ export default {
           align: 'center',
         },
       ],
-      list2: [],
+
+      // 动态列配置（核心：控制表格有哪些列）
+      columnData2: [
+        { label: "规格", prop: "col1", type: 'editItem', tag: 'input', icon: 'el-icon-remove-outline' },
+        { label: "规格值1", prop: "col2", type: 'editItem', tag: 'input', headerIcon: 'el-icon-remove-outline' },
+        { label: "规格值3", prop: "col3", type: 'editItem', tag: 'input', headerIcon: 'el-icon-remove-outline' },
+      ],
+      // 表格数据
+      list2: [
+        { col1: "", col2: "" },
+      ],
+
       list3: [],
 
-      columnData2: [],
+
       columnData3: [],
 
     }
@@ -176,29 +197,6 @@ export default {
 
   },
   methods: {
-    // 商品规格
-// const specs = {
-//   color: ['黑色', '白色'],
-//   size: ['大', '中', '小']
-// }
-
-// // 生成不重复的组合
-// getSpecCombination(specs) {
-//   const values = Object.values(specs)
-//   let result = [[]]
-
-//   values.forEach(item => {
-//     let temp = []
-//     result.forEach(arr => {
-//       item.forEach(val => {
-//         temp.push([...arr, val])
-//       })
-//     })
-//     result = temp
-//   })
-
-//   return result.map(item => item.join(' - '))
-// },
     // 文件个数超出
     handleExceed() {
       this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
@@ -212,7 +210,6 @@ export default {
           fileItem.type = 'mainImage'
         }
       });
-      console.log(file, fileList, 'fileList')
     },
     handleRemove(file) {
       let fileList = this.$refs.upload.uploadFiles;
@@ -221,6 +218,54 @@ export default {
       });
       fileList.splice(index, 1);
     },
+    // 1. 新增行
+    addRow() {
+      let newRow = {};
+      // 给每一列生成空值
+      this.columnData2.forEach(col => {
+        newRow[col.prop] = "";
+      });
+      this.list2.push(newRow);
+      console.log(this.list2, this.columnData2, 'this.list2新增列')
+    },
+
+    // 2. 删除行
+    delRow(index) {
+      console.log(index,'3333333333')
+      this.list2.splice(index, 1);
+    },
+
+    // 3. 新增列
+    addColumn() {
+      let colIndex = this.columnData2.length;
+      let newCol = {
+        label: `规格值${colIndex}`,
+        prop: `col${colIndex}`,
+        tag: 'input',
+        type: "editItem",
+        headerIcon: 'el-icon-remove-outline'
+      };
+      this.columnData2.push(newCol);
+
+      // 给每一行添加新列的空数据
+      this.list2.forEach(row => {
+        row[newCol.prop] = "";
+      });
+      console.log(this.list2, this.columnData2, 'this.list2新增列')
+    },
+
+    // 4. 删除列
+    delColumn(index) {
+      let delProp = this.columnData2[index].prop;
+      // 删除列配置
+      this.columnData2.splice(index, 1);
+
+      // 删除每行对应的数据
+      this.list2.forEach(row => {
+        delete row[delProp];
+      });
+    },
+    //服务承诺复选框
     handleCheckedChange(val) {
       // this.checkedCities = val ? cityOptions : [];
       this.form.cLdList = val.join(",");

src/views/pointsManagement/pointsMall/index.vue

@@ -23,7 +23,8 @@
     <div style="padding:0 15px;">
       <el-button style="margin-bottom: 15px;" type="primary" size="small"
         @click="handleAddOrEditOrDetails('新增')">新增商品</el-button>
-      <tableCompontent ref="tableRef" :loading="loading" :selection="true" :tableData="list"
+        <!-- :selection="true" -->
+      <tableCompontent ref="tableRef" :loading="loading"  :tableData="list"
         :height="'calc(100vh - 280px)'" :columnData="columnData">
         <template v-slot:operation="row">
           <el-button size="mini" type="primary" plain @click="handleEdit(row)">下架</el-button>