vue2 三级联动选项卡

可以使用vue2的组件库element-ui来实现三级联动选项卡。具体实现方法如下：

1. 引入element-ui组件库

npm i element-ui -S

2. 引入需要使用的组件

import { Cascader, Tabs, TabPane } from 'element-ui';

3. 定义数据源

data() {
  return {
    options: [{ // 第一级选项卡
      value: 'beijing',
      label: '北京市',
      children: [{
        value: 'chaoyang',
        label: '朝阳区',
        children: [{
          value: 'taiyanggong',
          label: '太阳宫',
        }, {
          value: 'guomao',
          label: '国贸',
        }],
      }, {
        value: 'haidian',
        label: '海淀区',
        children: [{
          value: 'zhongguancun',
          label: '中关村',
        }, {
          value: 'wudaokou',
          label: '五道口',
        }],
      }],
    }, { // 第二级选项卡
      value: 'shanghai',
      label: '上海市',
      children: [{
        value: 'pudong',
        label: '浦东新区',
        children: [{
          value: 'lujiazui',
          label: '陆家嘴',
        }],
      }, {
        value: 'minhang',
        label: '闵行区',
        children: [{
          value: 'wujing',
          label: '吴泾',
        }],
      }],
    }],
    activeTab: 0, // 当前选中的选项卡
  };
},

4. 渲染选项卡

<tabs v-model="activeTab">
  <tab-pane v-for="(option, index) in options" :key="index" :label="option.label">
    <cascader :options="option.children" @change="handleCascaderChange" />
  </tab-pane>
</tabs>

5. 实现change事件处理函数

methods: {
  handleCascaderChange(value) {
    console.log(value); // 输出当前选中的值
  },
},