表格样式完成

src/views/AppKgTable.vue

@@ -1,26 +1,25 @@
 <script>
-export default {
+const tableColumn = {
-  name: "AppKgTable",
+  props: {
-  label: "表格",
+    column: {default: () => ({})}
-  components: {
+  },
-    tableColumn: {
+  render(h) {
-      functional: true,
+    const config = this.$props.column
-      props: {
+    return h('el-table-column', {props: config},
-        column: {default: () => ({})}
+        config.children?.map(col => h(tableColumn, {props: {column: col}})) || h('template', {
-      },
-      render(h, vm) {
-        const config = vm.props.column
-        return h('el-table-column', {props: config}, h('template', {
           slotScope: {
             default: ({row}) => {
               config.custom ? h('div', {style: {color: row.preSaleNum > row.stockNum ? 'red' : '#fff'}}, '周边库存情况') :
-                  config.children?.map(col => h('table-column', {props: {column: col}})) || h('span', row[config.prop] || '')
+                  h('span', row[config.prop] || '')
             }
           }
         }))
-      },
-    }
   },
+}
+export default {
+  name: "AppKgTable",
+  label: "表格",
+  components: {tableColumn},
   data() {
     return {
       tableData: [
@@ -30,14 +29,12 @@ export default {
       ],
       columns: [
         {label: "重点单品", prop: "name"},
-        {label: "当日目标", prop: "targetNum", width: "70px"},
+        {label: "当日目标", prop: "targetNum", width: 70},
-        {label: "销售数量", prop: "saleNum", width: "70px"},
+        {label: "销售数量", prop: "saleNum", width: 70},
-        {label: "库存数量", prop: "stockNum", width: "70px"},
-        {label: "预计销售数量", prop: "preSaleNum"},
         {
           label: "合并表头示例", children: [
-            {"label": "当日目标", "prop": "targetNum", "width": "70px"},
+            {label: "库存数量", prop: "stockNum", width: "70px"},
-            {"label": "销售数量", "prop": "saleNum", "width": "70px"},
+            {label: "预计销售数量", prop: "preSaleNum"},
           ]
         },
         {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},