vxe-table 使用地区选择器

vxe-table 是一个基于 Vue.js 的表格组件库，提供了丰富的表格功能和灵活的 API 接口，可以帮助我们快速构建出各种类型的数据表格。

使用地区选择器可以通过 vxe-table 的自定义筛选功能来实现。具体步骤如下：

1. 在表格中添加一个自定义筛选项，可以使用 el-select 组件来实现，代码如下：

<!-- 自定义地区筛选 -->
<vxe-table-column field="region" title="地区" filters="region" filter-render="{name:'select', options:regionOptions}" />

其中，`field` 属性表示对应的数据字段名，`title` 属性表示表头标题，`filters` 属性表示筛选项类型为 `region`，`filter-render` 属性表示筛选项渲染方式为 `select`，`regionOptions` 为地区选项数组，需要在 data 中定义。

2. 在 data 中定义地区选项数组，代码如下：

data() {
  return {
    regionOptions: [
      { value: '北京', label: '北京' },
      { value: '上海', label: '上海' },
      { value: '广州', label: '广州' },
      { value: '深圳', label: '深圳' }
    ]
  }
}

3. 在 methods 中定义自定义筛选方法，代码如下：

methods: {
  handleFilter(params, { column }) {
    const { field } = column
    const { values } = params
    if (values.length) {
      return this.data.filter(item => values.includes(item[field]))
    }
    return this.data
  }
}

其中，`handleFilter` 方法接收两个参数，`params` 表示当前筛选条件，`{ column }` 表示当前列信息。我们需要根据当前选择的地区值来过滤数据，并返回符合条件的数据数组。

4. 在表格组件中绑定自定义筛选方法，代码如下：

<vxe-table :data="data" :custom-filter="handleFilter">

至此，就可以在 vxe-table 中实现地区选择器了。完整示例代码如下：

<template>
  <vxe-table :data="data" :custom-filter="handleFilter">
    <!-- 自定义地区筛选 -->
    <vxe-table-column field="region" title="地区" filters="region" filter-render="{name:'select', options:regionOptions}" />
    <vxe-table-column field="name" title="姓名" />
    <vxe-table-column field="age" title="年龄" />
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { name: '张三', age: 18, region: '北京' },
        { name: '李四', age: 22, region: '上海' },
        { name: '王五', age: 30, region: '广州' },
        { name: '赵六', age: 25, region: '深圳' }
      ],
      regionOptions: [
        { value: '北京', label: '北京' },
        { value: '上海', label: '上海' },
        { value: '广州', label: '广州' },
        { value: '深圳', label: '深圳' }
      ]
    }
  },
  methods: {
    handleFilter(params, { column }) {
      const { field } = column
      const { values } = params
      if (values.length) {
        return this.data.filter(item => values.includes(item[field]))
      }
      return this.data
    }
  }
}
</script>