Skip to content
广告位招租

优质广告位诚邀合作

本广告位曝光量正火速攀升,用户触达规模呈爆发式增长!现向品牌开放合作,趁曝光增长红利期,抓紧机会拿下,让您的品牌借势破圈!

--总浏览量(次)
--总计访客(人)

tabs

tabs栏组件,默认情况下使用dict-tabs使用,如果字典包配置中有配置componentsPreFix字段,请根据此字段的具体配置值进行前缀修改,如配置了componentsPreFixBu, 则使用bu-tabs使用。

复制成功

组件结构

组件封装结构如下

vue
<a-tabs ref="AntdvTabsRef">
  <a-tab-pane
    :ref="
      el => {
        if (el) AntdvTabPaneRefs[index] = el
      }
    ">
  </a-tab-pane>
</a-tabs>
js
const AntdvTabsRef = ref(null)
const getAntdvTabsRef = () => {
  return AntdvTabsRef.value
}

const AntdvTabPaneRefs = ref([])
const getAntdvTabPaneRefs = () => {
  return AntdvTabPaneRefs.value
}
defineExpose({ getAntdvTabsRef, getAntdvTabPaneRefs })
属性、事件和插槽继承技巧

此组件引用了a-tabsa-tab-pane两个组件,其中a-tabs组件可直接继承原生属性、事件和插槽, a-tab-pane继承属性、事件和插槽时添加 tab-pane 前缀即可

属性

本组件继承a-tabs组件全部属性、事件及插槽,并新增如下属性配置。

属性类型说明默认值
dictTypeString, Object字典类型,传递字典类型选项将渲染该字典类型对应的数据,传递对象时请继续阅读文档""
disabledObjObject用于禁用数据的对象(仅对字典数据有效),具体用法见下文null
filterDataFun(list)function接收字典类型对应的数据对数据进行过滤处理null
disabledDataFun(item)function(仅对字典数据有效)接收的是字典类型对应数据项的具体一项,根据条件进行返回true则是禁用null
optionsArray自定义选项数据,优先级最大null
fieldNamesObject用于格式化数据字段,将数据字段匹配成与字典配置的fieldNames一致的格式。见下文
keyValueBooleandictChange事件是否返回对象形式false
addAllTextString有配置值时,则会多出一个值为null、选项名称为此配置值的选项""

fieldNames默认值

js
{
 label: "label",
 value: "value",
 disabled: "disabled"
}

content插槽

默认插槽为tabs-item, 有值时则插槽名为 tabs-item-${value}

dictType为对象类型时

拥有下列属性

字段类型说明默认值
typestring对应字典类型""
filtersstring,array过滤掉的数据,多个且为字符串类型时使用英文逗号分隔""
filterTypestring上述配置的filters根据哪个字段过滤字典包配置中的format.value
reverseBooleanfalse时 则只展示filters配置的值,true时则返选false

disabledObj配置

拥有下列属性

字段类型说明默认值
disabledValuesstring,array需要禁选的值""
disabledTypestring上述配置的disabledValues根据什么字段进行禁选字典包配置中的format.value
reverseBooleanfalse时,配置的值必为禁选,true时,非配置的值必为禁选false

事件

事件名称说明
dictChange选中值时触发此事件,并返回一个值, keyValue为false时返回当前选中值,为true时返回当前选中值的对象

注意

注意

options自定义数据优先级大于dictType

disabledDataFun 配置优先级最高,return的值就是disabled的值 配置了disabledDataFun后 disabledObj 将失效

disabledObj 配置优先级最低,优先取原生字典数据的disabled值,原生disabled值为false再取disabledObj的配置,即此配置无法覆盖原生字典数据的disabled为true的值

微信公众号【爆米花小布】

0%

置顶

置顶