docs(grid): [grid] add updateFooter demo

examples/sites/demos/pc/app/grid/footer/footer-row-or-column-span-composition-api.vue

@@ -85,23 +85,13 @@ function footerMethod({ columns, data }) {
         return '全部的员工数量'
       }
 
-      if (column.property === 'employees') {
-        return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
+      if (columnIndex === 2) {
+        return data.map((item) => item.employees).reduce((acc, item) => acc + item)
       }
 
       return null
     }),
-    columns.map((column, columnIndex) => {
-      if (columnIndex === 0) {
-        return null
-      }
-
-      if (column.property === 'employees') {
-        return null
-      }
-
-      return null
-    })
+    columns.map(() => null)
   ]
 }
 
@@ -111,25 +101,9 @@ function footerRowspanMethod({ $rowIndex, columnIndex }) {
       return { rowspan: 2, colspan: 2 }
     }
 
-    if (columnIndex === 1) {
-      return { rowspan: 0, colspan: 0 }
-    }
-
-    if (columnIndex === 3) {
+    if (columnIndex === 2) {
       return { rowspan: 2, colspan: 1 }
     }
-  } else if ($rowIndex === 1) {
-    if (columnIndex === 0) {
-      return { rowspan: 0, colspan: 0 }
-    }
-
-    if (columnIndex === 1) {
-      return { rowspan: 0, colspan: 0 }
-    }
-
-    if (columnIndex === 3) {
-      return { rowspan: 0, colspan: 0 }
-    }
   }
 }
 </script>

examples/sites/demos/pc/app/grid/footer/footer-row-or-column-span.vue

@@ -93,23 +93,13 @@ export default {
             return '全部的员工数量'
           }
 
-          if (column.property === 'employees') {
-            return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
+          if (columnIndex === 2) {
+            return data.map((item) => item.employees).reduce((acc, item) => acc + item)
           }
 
           return null
         }),
-        columns.map((column, columnIndex) => {
-          if (columnIndex === 0) {
-            return null
-          }
-
-          if (column.property === 'employees') {
-            return null
-          }
-
-          return null
-        })
+        columns.map(() => null)
       ]
     },
     footerRowspanMethod({ $rowIndex, columnIndex }) {
@@ -118,25 +108,9 @@ export default {
           return { rowspan: 2, colspan: 2 }
         }
 
-        if (columnIndex === 1) {
-          return { rowspan: 0, colspan: 0 }
-        }
-
-        if (columnIndex === 3) {
+        if (columnIndex === 2) {
           return { rowspan: 2, colspan: 1 }
         }
-      } else if ($rowIndex === 1) {
-        if (columnIndex === 0) {
-          return { rowspan: 0, colspan: 0 }
-        }
-
-        if (columnIndex === 1) {
-          return { rowspan: 0, colspan: 0 }
-        }
-
-        if (columnIndex === 3) {
-          return { rowspan: 0, colspan: 0 }
-        }
       }
     }
   }

examples/sites/demos/pc/app/grid/footer/update-footer-composition-api.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <tiny-grid ref="gridRef" :data="tableData" show-footer :footer-method="footerMethod" border :edit-config="{}">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column
+        field="employees"
+        title="员工数"
+        :editor="{ component: TinyNumeric, events: { change: handleChange } }"
+      ></tiny-grid-column>
+      <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+      <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyGrid, TinyGridColumn, TinyNumeric } from '@opentiny/vue'
+
+const gridRef = ref()
+const tableData = ref([
+  {
+    id: '0',
+    name: 'GFD 科技 YX 公司',
+    city: '福州',
+    employees: 800,
+    createdDate: '2014-04-30 00:56:00'
+  },
+  {
+    id: '2',
+    name: 'WWW 科技 YX 公司',
+    city: '深圳',
+    employees: 300,
+    createdDate: '2016-07-08 12:36:22'
+  },
+  {
+    id: '3',
+    name: 'RFV 有限责任公司',
+    city: '中山',
+    employees: 1300,
+    createdDate: '2014-02-14 14:14:14'
+  },
+  {
+    id: '4',
+    name: 'TGB 科技 YX 公司',
+    city: '龙岩',
+    employees: 360,
+    createdDate: '2013-01-13 13:13:13'
+  },
+  {
+    id: '5',
+    name: 'YHN 科技 YX 公司',
+    city: '韶关',
+    employees: 810,
+    createdDate: '2012-12-12 12:12:12'
+  },
+  {
+    id: '6',
+    name: 'WSX 科技 YX 公司',
+    city: '黄冈',
+    employees: 800,
+    createdDate: '2011-11-11 11:11:11'
+  },
+  {
+    id: '7',
+    name: 'KBG 物业 YX 公司',
+    city: '赤壁',
+    employees: 400,
+    createdDate: '2016-04-30 23:56:00'
+  },
+  {
+    id: '8',
+    name: '深圳市福德宝网络技术 YX 公司',
+    city: '厦门',
+    employees: 540,
+    createdDate: '2016-06-03 13:53:25'
+  }
+])
+
+function handleChange() {
+  gridRef.value.updateFooter()
+}
+function footerMethod({ columns, data }) {
+  if (data.length === 0) {
+    return [['和值', '', '', 0]]
+  }
+
+  return [
+    columns.map((column, columnIndex) => {
+      if (columnIndex === 0) {
+        return '和值'
+      }
+
+      if (column.property === 'employees') {
+        return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
+      }
+
+      return null
+    })
+  ]
+}
+</script>

examples/sites/demos/pc/app/grid/footer/update-footer.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('表尾合并行或列', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const demo = page.locator('#update-footer')
+  await page.goto('grid-footer#update-footer')
+  await expect(demo.getByRole('cell', { name: '5310' })).toBeVisible()
+  await demo.getByRole('cell', { name: '1300' }).click()
+  await demo.locator('.tiny-numeric__increase').click()
+  await expect(demo.getByRole('cell', { name: '5311' })).toBeVisible()
+})

examples/sites/demos/pc/app/grid/footer/update-footer.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <tiny-grid ref="grid" :data="tableData" show-footer :footer-method="footerMethod" border :edit-config="{}">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column
+        field="employees"
+        title="员工数"
+        :editor="{ component: TinyNumeric, events: { change: handleChange } }"
+      ></tiny-grid-column>
+      <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
+      <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { TinyGrid, TinyGridColumn, TinyNumeric } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn
+  },
+  data() {
+    return {
+      TinyNumeric,
+      tableData: [
+        {
+          id: '0',
+          name: 'GFD 科技 YX 公司',
+          city: '福州',
+          employees: 800,
+          createdDate: '2014-04-30 00:56:00'
+        },
+        {
+          id: '2',
+          name: 'WWW 科技 YX 公司',
+          city: '深圳',
+          employees: 300,
+          createdDate: '2016-07-08 12:36:22'
+        },
+        {
+          id: '3',
+          name: 'RFV 有限责任公司',
+          city: '中山',
+          employees: 1300,
+          createdDate: '2014-02-14 14:14:14'
+        },
+        {
+          id: '4',
+          name: 'TGB 科技 YX 公司',
+          city: '龙岩',
+          employees: 360,
+          createdDate: '2013-01-13 13:13:13'
+        },
+        {
+          id: '5',
+          name: 'YHN 科技 YX 公司',
+          city: '韶关',
+          employees: 810,
+          createdDate: '2012-12-12 12:12:12'
+        },
+        {
+          id: '6',
+          name: 'WSX 科技 YX 公司',
+          city: '黄冈',
+          employees: 800,
+          createdDate: '2011-11-11 11:11:11'
+        },
+        {
+          id: '7',
+          name: 'KBG 物业 YX 公司',
+          city: '赤壁',
+          employees: 400,
+          createdDate: '2016-04-30 23:56:00'
+        },
+        {
+          id: '8',
+          name: '深圳市福德宝网络技术 YX 公司',
+          city: '厦门',
+          employees: 540,
+          createdDate: '2016-06-03 13:53:25'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleChange() {
+      this.$refs.grid.updateFooter()
+    },
+    footerMethod({ columns, data }) {
+      if (data.length === 0) {
+        return [['和值', '', '', 0]]
+      }
+
+      return [
+        columns.map((column, columnIndex) => {
+          if (columnIndex === 0) {
+            return '和值'
+          }
+
+          if (column.property === 'employees') {
+            return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
+          }
+
+          return null
+        })
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/grid/webdoc/grid-footer.js

@@ -30,6 +30,16 @@ export default {
           '<p>Use <code>footer-method</code> and <code>footer-span-method</code> to set the total row or column logic of the table tail. <code>show-footer</code></p>\n must be configured'
       },
       'codeFiles': ['footer/footer-row-or-column-span.vue']
+    },
+    {
+      'demoId': 'update-footer',
+      'name': { 'zh-CN': '手动更新表尾数据', 'en-US': '' },
+      'desc': {
+        'zh-CN':
+          '<p>默认情况下，只有当编辑失焦后才会更新表尾数据，通过 <code>updateFooter</code> 可以手动更新表尾数据。</p>\n',
+        'en-US': '<p></p>'
+      },
+      'codeFiles': ['footer/update-footer.vue']
     }
   ],
   apis: [{ 'name': 'grid-footer', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

packages/vue/src/grid/src/adapter/src/renderer.ts

@@ -100,24 +100,32 @@ function getEvents(renderOpts, params, context) {
 }
 
 function renderOptions(h, options, renderOpts, params, context) {
-  let { optionProps = {} } = renderOpts
-  let labelProp = optionProps.label || 'label'
-  let valueProp = optionProps.value || 'value'
-  let { column, row } = params
-  let { formatConfig } = column.own
-  let cellValue = isSyncCell(renderOpts, params, context) ? getCellValue(row, column) : column.model.value
+  const { optionProps = {} } = renderOpts
+  const labelProp = optionProps.label || 'label'
+  const valueProp = optionProps.value || 'value'
+  const { column, row } = params
+  const { formatConfig } = column.own
+  const cellValue = isSyncCell(renderOpts, params, context) ? getCellValue(row, column) : column.model.value
 
   if (!options && formatConfig && formatConfig.data) {
     options = formatConfig.data
   }
-
-  return options.map((item, index) => {
-    let attrs = {
-      domProps: { value: item[valueProp], selected: item.value === cellValue },
+  let hasSelected = false
+  const optionsList = options.map((item, index) => {
+    const selected = item.value === cellValue
+    if (selected) {
+      hasSelected = true
+    }
+    const attrs = {
+      domProps: { value: item[valueProp], selected },
       key: index
     }
     return h('option', attrs, item[labelProp])
   })
+  if (options.length && !hasSelected) {
+    optionsList.unshift(h('option', { style: 'display:none', selected: true }, ''))
+  }
+  return optionsList
 }
 
 function renderOptgroups(h, options, params, context) {