<vxe-grid v-bind="gridOptions" ref="xGrid" :data="tableData">中spanMethod 怎么使用

在 `<vxe-grid>` 组件中，可以通过 `span-method` 属性来指定 `spanMethod` 函数。具体使用方法如下：

<template>
  <vxe-grid v-bind="gridOptions" ref="xGrid" :data="tableData">
    <vxe-column field="id" title="ID"></vxe-column>
    <vxe-column field="name" title="姓名"></vxe-column>
    <vxe-column field="age" title="年龄"></vxe-column>
    <vxe-column field="gender" title="性别" :span-method="spanMethod"></vxe-column>
  </vxe-grid>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20, gender: '男' },
        { id: 2, name: '李四', age: 25, gender: '女' },
        { id: 3, name: '王五', age: 30, gender: '男' },
        { id: 4, name: '赵六', age: 35, gender: '女' }
      ],
      gridOptions: {
        height: 300,
        columns: []
      }
    }
  },
  mounted() {
    this.gridOptions.columns = this.$refs.xGrid.getTableColumns()
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 3) {
        return {
          rowspan: 2,
          colspan: 1
        }
      }
    }
  }
}
</script>

在这个例子中，我们使用 `:span-method` 属性将 `spanMethod` 函数指定给了第四列的 `gender` 列。在 `spanMethod` 函数中，我们根据当前单元格的行索引和列索引，来返回该单元格需要跨越的行数和列数。在本例中，我们让第一行的 `gender` 单元格跨越两行，从而实现了单元格合并的效果。