实现效果

代码

index.vue

<template>
  <div>
    <a-table :columns="columns" :dataSource="data" rowKey="code" :pagination="false" bordered>
    </a-table>
  </div>
</template>

<script>
import { area } from './region'

const provinceRender = (value, row, index) => {
  return {
    children: value,
    attrs: {
      rowSpan: row.provinceRowSpan
    },
  };
};

const cityRender = (value, row, index) => {
  return {
    children: value,
    attrs: {
      rowSpan: row.cityRowSpan
    },
  };
};

const columns = [
  {
    title: 'id',
    align: 'center',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '省份',
    align: 'center',
    dataIndex: 'province',
    key: 'province',
    customRender: provinceRender,
  },
  {
    title: '城市',
    align: 'center',
    dataIndex: 'city',
    key: 'city',
    customRender: cityRender,
  },
  {
    title: '区县',
    align: 'center',
    dataIndex: 'county',
    key: 'county',
  },
]

export default {
  data() {
    return {
      sortLevel: ['province', 'city'],
      data: [],
      columns,
    }
  },
  mounted() {
    let data = JSON.parse(JSON.stringify(area))
    this.data = this.convertData(data)
  },
  methods: {
    // 获取需要合并数据的rowSpan
    convertData(arr, levelIndex = 0) {
      const levelKey = this.sortLevel
      const key = levelKey[levelIndex]

      // 根据不同维度重新整合数据
      let groupObj = this.groupBy(arr, key) || {};
      Object.keys(groupObj).forEach(groupKey => {
        if (levelIndex < levelKey.length - 1) {
          groupObj[groupKey] = this.convertData(groupObj[groupKey], levelIndex + 1)
        }
        // 计算rowSpan
        groupObj[groupKey].forEach((item, index, arr) => {
          item[`${key}RowSpan`] = index === 0 ? arr.length : 0
        })
      })

      return Object.values(groupObj).flat()
    },
    // 根据属性分组
    groupBy(arr = [], key) {
      let obj = {}
      arr.forEach(item => {
        const val = item[key]
        if (!obj[val]) {
          obj[val] = []
        }
        obj[val].push(item)
      })

      return obj
    },
  },
}
</script>
<style lang="less" scoped></style>

./region.js

export const area = [
    { code: "140105", province: "山西省", city: "太原市", county: "小店区" },
    { code: "140225", province: "山西省", city: "大同市", county: "浑源县" },
    { code: "140271", province: "山西省", city: "大同市", county: "山西大同经济开发区" },
    { code: "140302", province: "山西省", city: "阳泉市", county: "城区" },
    { code: "140403", province: "山西省", city: "长治市", county: "潞州区" },
    { code: "140404", province: "山西省", city: "长治市", county: "上党区" },
    { code: "141102", province: "山西省", city: "吕梁市", county: "离石区" },
    { code: "141182", province: "山西省", city: "吕梁市", county: "汾阳市" },
    { code: "110101", province: "北京市", city: "市辖区", county: "东城区" },
    { code: "110106", province: "北京市", city: "市辖区", county: "丰台区" },
    { code: "110107", province: "北京市", city: "市辖区", county: "石景山区" },
]

export const region = [
    {
        code: "14",
        name: "山西省",
        children: [
            {
                code: "1401",
                name: "太原市",
                children: [
                    { code: "140105", name: "小店区" },
                ],
            },
            {
                code: "1402",
                name: "大同市",
                children: [
                    { code: "140225", name: "浑源县" },
                    { code: "140271", name: "山西大同经济开发区" }
                ],
            },
            {
                code: "1403",
                name: "阳泉市",
                children: [
                    { code: "140302", name: "城区" },
                ],
            },
            {
                code: "1404",
                name: "长治市",
                children: [
                    { code: "140403", name: "潞州区" },
                    { code: "140404", name: "上党区" },
                ],
            },
            {
                code: "1411",
                name: "吕梁市",
                children: [
                    { code: "141102", name: "离石区" },
                    { code: "141182", name: "汾阳市" },
                ],
            },
        ],
    },
    {
        code: "11",
        name: "北京市",
        children: [
            {
                code: "1101",
                name: "市辖区",
                children: [
                    { code: "110101", name: "东城区" },
                    { code: "110106", name: "丰台区" },
                    { code: "110107", name: "石景山区" },
                ],
            },
        ],
    },
]

如果使用的是region.js里的region数据，即children的组合形式，则先将数据转换成area的格式

data() {
  return {
      flatLevel: ['province', 'city', 'county'],
 }
},
methods: {
  getFlatData(arr) {
      const levelKey = this.flatLevel
      let flatData = []

      flat(arr)
      return flatData

      function flat(arr, parentObj = {}, level = 0) {
        arr.forEach(item => {
          const key = levelKey[level]
          const { name, children } = item
          const obj = Object.assign({}, parentObj, item)
          delete obj.children
          delete obj.name
          obj[key] = name
          if (children?.length) {
            flat(children, obj, level + 1)
          } else {
            flatData.push(obj)
          }
        })
      }
    },
}

依赖版本：

"ant-design-vue": "^1.7.8",
"vue": "^2.6.11",