[TOC] **配置步骤如下:** ### **1、添加选项卡** 点击“![](https://img.kancloud.cn/e1/af/e1afefd58679b7638acd9127cfb3eff3_36x35.png)”图标,再点击“选项卡 ->选项卡”,即可创建新的图像; ![](https://img.kancloud.cn/8b/14/8b14fd57cf695ce8f983f0ba3dfbf918_529x261.png) :-: 图8.11 ### **2、样式配置** #### **(1)字体设置** 选中该选项卡组件,在操作界面右侧的“字体大小”、“字体颜色”和“字体间距”处可修改组件的字体样式,如图8.12。 * 字体大小:可修改文字的大小; * 字体颜色:可修改文字的颜色; * 字体间距:可修改“选项卡1”与“选项卡2”之间的距离; ![](https://img.kancloud.cn/31/00/31001024b7837ce7c453ae5a0e8d6091_709x448.png) :-: 图8.12 #### **(2)类型** 选中该选项卡组件,在操作界面右侧的“类型”处可修改组件的展示类型,如图8.13。 ![](https://img.kancloud.cn/f7/16/f7165a237c00dea3ea2b4f63ebb6a599_1276x446.png) :-: 图8.13 #### **(3)边框设置** 选中该选项卡组件,在操作界面右侧的“边框设置”处可设置选项卡的边框样式,如图8.14。 * 背景颜色:选项卡的背景颜色; * 缩略图:背景图缩略图; * 背景图片:背景图片上传; * 边框颜色:边框的颜色; * 边框宽度:边框宽度; ![](https://img.kancloud.cn/77/16/771670b48640725bee2f05ef6c63e290_634x238.png) :-: 图8.14 #### **(4)高亮设置** 选中该选项卡组件,在操作界面右侧的“高亮设置”处可设置选项卡的选中的样式,如图8.15。 * 字体高亮颜色:设置选中的字体颜色; * 缩略图:背景图缩略图; * 背景图片:背景图片上传; * 边框颜色:边框的颜色; * 边框宽度:边框宽度; ![](https://img.kancloud.cn/a1/f9/a1f948aedf31763247c526b0f70b49b0_623x349.png) :-: 图8.15 #### **(5)选项卡切换-不同选项对应不同组件** * 要想实现不同选项卡对应不同组件我们需要利用组件隐藏特性,比如点击选项卡1时显示柱形图,点击选项卡2时显示折线图,点击选项卡3时显示饼图,如下图 ![](https://img.kancloud.cn/30/c4/30c4c85d226ecd575fcb3c68a40c9999_1083x452.png) 配置方法如下 ![](https://img.kancloud.cn/5b/3f/5b3f8148842130753120a3d2ad0228c4_1205x555.png) * 配置各个选项卡对应的组件 ![](https://img.kancloud.cn/ca/d8/cad8bdb95c802f5f6a0fd543ac6037be_1184x320.png) ![](https://img.kancloud.cn/c4/b0/c4b00ba41bb95bb298299a9f223b2605_1215x300.png) * 设置组件隐藏(只需要隐藏选项卡2和选项卡3对应的组件),否则3个组件会同时显示,达不到切换效果 ![](https://img.kancloud.cn/ed/86/ed8614edbc6e633023784b55da33ff2d_1249x407.png) #### **(6)选项卡互动** * 要想实现选项跟其他组件互动效果,需要在“交互方式”,中选择参数 * 关联组件:想要实现通过选项卡切换,实现数据切换的组件,可以是柱形图,也可以是环形图等; * 参数:随便写,可以是key,传递给其他组件的参数名称; ![](https://img.kancloud.cn/ba/f9/baf9823baca496f935737113539b2d7e_798x330.png) :-: 图8.16 #### **(7)参数配置** 参数设置为: type,则表示给联动的组件传递参数 type 测试接口: http://api.jeecg.com/mock/26/bar\_1619687897904 (此接口根据参数type实现不同的数据返回结果) ![](https://img.kancloud.cn/8e/3e/8e3e20f443b5d73595cc6e3240fd10e3_810x365.png) 联动配置好效果 ![](https://img.kancloud.cn/bc/95/bc9520068600d02ac70169d4a2a55f7c_716x949.gif)