vxe-grid表尾的行怎么自定义

你可以通过以下步骤自定义 `vxe-grid` 表格的表尾行：

1. 在 `vxe-grid` 组件中，使用 `footer-rows` 属性绑定表尾行的数据，例如：

<vxe-grid :footer-rows="footerRows"></vxe-grid>

2. 在 `methods` 中定义 `footerMethod` 方法，该方法会在表格渲染表尾行时被调用，例如：

methods: {
  footerMethod ({ columns, data }) {
    return [
      {
        field: 'column1',
        title: 'Total',
        colspan: 2,
        footerRender: ({ $rowIndex }) => {
          return {
            children: data.reduce((total, row) => total + row.column1, 0)
          }
        }
      },
      {
        field: 'column2',
        footerRender: ({ $rowIndex }) => {
          return {
            children: data.reduce((total, row) => total + row.column2, 0)
          }
        }
      }
    ]
  }
}

在这个示例中，我们定义了一个 `footerMethod` 方法，并返回一个包含两个表尾行列的数组。第一列的标题为 “Total”，跨越两列，第二列的标题为 “column2”。`footerRender` 函数用于渲染表尾行的单元格，通过 `data.reduce` 方法计算每列的总和并返回一个包含 `children` 属性的对象。

3. 在 `created` 生命周期中调用 `refreshFooter` 方法，以便在数据改变时重新渲染表尾行，例如：

created () {
  this.refreshFooter()
},
methods: {
  refreshFooter () {
    this.$refs.grid.refreshFooter()
  },
  footerMethod ({ columns, data }) {
    // ...
  }
}

在这个示例中，我们在 `created` 生命周期中调用 `refreshFooter` 方法，该方法会重新渲染表尾行。

这样就可以自定义 `vxe-grid` 表格的表尾行了。