规格明细table

src/components/tableCompontent/TableColumn.vue

@@ -30,7 +30,7 @@
       <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;">
+      <div v-else>
         {{ itemCol.label }}
       </div>
     </template>
@@ -110,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'" style="display: flex;align-items: center;">
+      <div v-else-if="itemCol.type == 'editItem'" style="display: flex;align-items: center;justify-content: center;">
         <el-input
           @change="editItemChange(scope.row, itemCol)"
           v-if="itemCol.tag == 'input'"
@@ -129,6 +129,7 @@
           size="small"
           :precision="itemCol.precision"
           :step="itemCol.step"
+          :min="itemCol.min"
           clearable
         />
         <el-select v-if="itemCol.tag == 'select'" v-model="scope.row[itemCol.prop]" :disabled="isDisabled" clearable filterable placeholder="" size="small">

src/views/pointsManagement/pointsMall/addOrEditOrDetail.vue

@@ -38,13 +38,35 @@
           <el-form-item label="规格">
             <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 :maxHeight="'400px'" :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="tableRef3" :tableData="list1" :columnData="columnData1">
+            <DictSelect v-model="formInline.selectPaymentMethodValue" :dictOptions="selectPaymentMethod"
+              placeholder="请选择" style="margin-bottom: 15px;" />
+            <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef3" :tableData="list3"
+              :columnData="columnData3">
+              <template v-slot:img="row">
+                <div style="display: flex;justify-content: center;">
+                  <ImageUpload :isShowTip="false" v-model="row.img" :limit="1" />
+                </div>
+              </template>
+              <template v-slot:pointsOrprice="row">
+                <div v-if="formInline.selectPaymentMethodValue == 1 || formInline.selectPaymentMethodValue == 2">
+                  <el-input-number :model="formInline.selectPaymentMethodValue == 1 ? row.points : row.price"
+                    controls-position="right" :min="1" :max="10"></el-input-number>
+                  <span>{{ formInline.selectPaymentMethodValue == 1 ? '积分' : '元' }}</span>
+                </div>
+                <div v-if="formInline.selectPaymentMethodValue == 3">
+                  <el-input-number v-model="row.price" controls-position="right" :min="1" :max="10"></el-input-number>
+                  <span>元 +</span>
+                  <el-input-number v-model="row.points" controls-position="right" :min="1" :max="10"></el-input-number>
+                  <span>积分</span>
+                </div>
+
+
+              </template>
             </tableCompontent>
           </el-form-item>
         </div>
@@ -75,7 +97,8 @@
       <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 :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>
@@ -123,7 +146,13 @@ export default {
         region: '',
         shopMainImg: '',
         shopImg: '',
+        selectPaymentMethodValue: '1',
       },
+      selectPaymentMethod: [
+        { label: '积分', value: '1' },
+        { label: '金额', value: '2' },
+        { label: '积分+金额', value: '3' }
+      ],
       navigateMenuOption: [
         { label: '测试数据', value: '1' },
         { label: '测试数据1', value: '2' },
@@ -177,23 +206,30 @@ export default {
 
       // 动态列配置（核心：控制表格有哪些列）
       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' },
+        { label: "规格", prop: "col1", type: 'editItem', tag: 'input', icon: 'el-icon-remove-outline', align: 'center' },
+        { label: "规格值1", prop: "col2", type: 'editItem', tag: 'input', headerIcon: 'el-icon-remove-outline', align: 'center' },
+        { label: "规格值3", prop: "col3", type: 'editItem', tag: 'input', headerIcon: 'el-icon-remove-outline', align: 'center' },
       ],
       // 表格数据
       list2: [
         { col1: "", col2: "" },
       ],
 
-      list3: [],
-
-
+      list3: [
+        { col1: "白色、加粗、大号", img: "", price: '', oriangePrice: 2, number: 6 },
+      ],
       columnData3: [],
 
     }
   },
   created() {
+    this.columnData3 = [
+      { label: "规格", prop: "col1", type: 'diy', align: 'center', },
+      { label: "图片", prop: "img", type: 'diy', align: 'center', },
+      { label: "价格", prop: "pointsOrprice", type: 'diy', width: 400, align: 'center', },
+      { label: "原价", prop: "oriangePrice", type: 'editItem', tag: 'inputNumber', min: 0, align: 'center', },
+      { label: "库存", prop: "number", type: 'editItem', tag: 'inputNumber', min: 0, align: 'center', },
+    ]
 
   },
   methods: {
@@ -231,7 +267,7 @@ export default {
 
     // 2. 删除行
     delRow(index) {
-      console.log(index,'3333333333')
+      console.log(index, '3333333333')
       this.list2.splice(index, 1);
     },
 
@@ -243,7 +279,8 @@ export default {
         prop: `col${colIndex}`,
         tag: 'input',
         type: "editItem",
-        headerIcon: 'el-icon-remove-outline'
+        headerIcon: 'el-icon-remove-outline',
+        align: 'center'
       };
       this.columnData2.push(newCol);
 

src/views/pointsManagement/pointsMall/index.vue

@@ -37,7 +37,7 @@
     </div>
 
     <!-- 编辑、新增、详情 -->
-    <el-dialog center :title="title" width="60%" :append-to-body="true" :destroy-on-close="true"
+    <el-dialog center :title="title" width="80%" :append-to-body="true" :destroy-on-close="true"
       :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false">
       <div style="overflow-y: auto;height:80vh">
         <AddOrEditOrDetail></AddOrEditOrDetail>