IVIEW组件之轮子，开启二级城市多选之门

2023-09-03 11:46:33

前言

在开发过程中，我们经常需要处理多选场景，而对于二级城市的筛选，通常需要层级式的选项展示。IVIEW作为一款优秀的组件库，为我们提供了基础的checkbox和poptip组件，但对于二级城市的多选需求，还需要我们进行进一步的封装。

为了满足二级城市多选的需求，我们基于IVIEW提供的checkbox和poptip组件，封装了一个名为area的组件。该组件具备以下特点：

层级展示： 支持二级城市的层级展示，方便用户选择。
可配置性高： 支持自定义数据源，可灵活适应不同的城市数据结构。
易于使用： 使用简单，只需传入数据源即可使用。

实现原理

area组件的实现原理主要基于checkbox和poptip组件。通过将poptip组件嵌套在checkbox组件中，实现二级城市的层级展示。当用户点击checkbox时，会触发poptip组件的显示，展示二级城市选项。用户可以选择其中一个或多个二级城市，并通过checkbox的值进行返回。

使用示例

import Area from '@/components/Area';

export default {
  components: { Area },
  data() {
    return {
      areaData: [
        {
          value: '110000',
          label: '北京市',
          children: [
            {
              value: '110100',
              label: '东城区',
            },
            {
              value: '110200',
              label: '西城区',
            },
          ],
        },
        {
          value: '310000',
          label: '上海市',
          children: [
            {
              value: '310100',
              label: '黄浦区',
            },
            {
              value: '310200',
              label: '徐汇区',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleAreaChange(value) {
      console.log(value);
    },
  },
};