diff --git a/components/select-tree/selectTree.vue b/components/select-tree/selectTree.vue index cbd3ee19..c36fe114 100644 --- a/components/select-tree/selectTree.vue +++ b/components/select-tree/selectTree.vue @@ -61,6 +61,8 @@ virtualList :style="dropdownStyle" :class="`${prefixCls}-dropdown is-max-height`" + :filterText="filterText" + :filterTextHighlight="filterTextHighlight" @update:nodeList="onChangeNodeList" @select="handleSelect" @check="handleCheck" @@ -101,6 +103,8 @@ :inline="inline" :remote="remote" :loadData="loadData" + :filterText="filterText" + :filterTextHighlight="filterTextHighlight" @update:nodeList="onChangeNodeList" @select="handleSelect" @check="handleCheck" @@ -200,6 +204,7 @@ export default defineComponent({ 'focus', 'blur', 'clear', + 'filter', ], setup(props, { emit, attrs }) { useTheme(); @@ -409,6 +414,7 @@ export default defineComponent({ const handleFilterTextChange = (val: string) => { filterText.value = val; + emit('filter', val); }; const refTree = ref(null); @@ -473,6 +479,7 @@ export default defineComponent({ isError, attrs, innerDisabled, + filterText, }; }, }); diff --git a/components/tree/props.ts b/components/tree/props.ts index 3bc89eb0..cdc3e867 100644 --- a/components/tree/props.ts +++ b/components/tree/props.ts @@ -111,6 +111,8 @@ export const treeProps = { type: Boolean, default: false, }, + filterText: String, + filterTextHighlight: Boolean, } as const satisfies ComponentObjectPropsOptions; export const treePropsDefaultValue = extractPropsDefaultValue(treeProps); diff --git a/components/tree/treeNode.tsx b/components/tree/treeNode.tsx index aa406b75..cea67cdc 100644 --- a/components/tree/treeNode.tsx +++ b/components/tree/treeNode.tsx @@ -14,6 +14,7 @@ import CaretDownOutlined from '../icon/CaretDownOutlined'; import LoadingOutlined from '../icon/LoadingOutlined'; import Checkbox from '../checkbox'; import FEllipsis from '../ellipsis'; +import TextHightlight from '../text-highlight'; import { COMPONENT_NAME, INDENT } from './const'; import useTreeNode from './useTreeNode'; @@ -253,8 +254,16 @@ export default defineComponent({ return ( + > + {root.props.filterTextHighlight && root.props.filterText + ? ( + + {props.label} + + ) + : props.label + } + ); }; diff --git a/docs/.vitepress/components/select/filterable.vue b/docs/.vitepress/components/select/filterable.vue index 9b80a463..7772dd0e 100644 --- a/docs/.vitepress/components/select/filterable.vue +++ b/docs/.vitepress/components/select/filterable.vue @@ -43,7 +43,10 @@ :key="item.label" :value="item.value" > - {{ item.label }} + + {{ item.label }} + + @@ -60,7 +63,7 @@ const filterTextHighlight = ref(false); const optionList = reactive([ { value: 'HuNan', - label: '湖南', + label: '湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南', }, { value: 'HuBei', @@ -91,7 +94,7 @@ const cityOptions = [ }, { value: '湖南', - label: '湖南', + label: '湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南', }, { value: '河南', diff --git a/docs/.vitepress/components/selectTree/filterable.vue b/docs/.vitepress/components/selectTree/filterable.vue index 8a5838cb..a5295275 100644 --- a/docs/.vitepress/components/selectTree/filterable.vue +++ b/docs/.vitepress/components/selectTree/filterable.vue @@ -1,24 +1,42 @@ - diff --git a/docs/.vitepress/components/selectTree/index.md b/docs/.vitepress/components/selectTree/index.md index 621068f4..51d90f9a 100644 --- a/docs/.vitepress/components/selectTree/index.md +++ b/docs/.vitepress/components/selectTree/index.md @@ -16,50 +16,67 @@ app.use(FSelectTree); 适用广泛的基础单选 ---COMMON +:::demo +common.vue +::: ### 可清空 包含清空按钮,可将选择器清空为初始状态 ---CLEARABLE +:::demo +clearable.vue +::: ### 基础多选 适用性较广的基础多选,用 `Tag` 展示已选项 ---MULTIPLE +:::demo +multiple.vue +::: ### 可搜索 可以利用搜索功能快速查找选项 ---FILTERABLE +:::demo +filterable.vue +::: ### 禁用状态 选择器不可用状态 ---DISABLED +:::demo +disabled.vue +::: ### 虚拟列表 设置`virtualList`属性,处理大数据。 ---VIRTUALLIST + +:::demo +virtualList.vue +::: ### 控制回填内容 ---LABELFIELD +:::demo +labelField.vue +::: ### 无数据 ---NODATA +:::demo +nodata.vue +::: ### 获取选中路径 ---WITHPATH - ---CODE +:::demo +withPath.vue +::: ## SelectTree Props @@ -79,6 +96,7 @@ app.use(FSelectTree); | modelValue / v-model | 选中的值 | number / string / array | - | | filterable | 是否支持过滤选项 | boolean | `false` | | filter | 自定义过滤函数 | (pattern: string, option: TreeOption) => boolean | `-` | +| filterTextHighlight | 过滤文本是否高亮 | boolean | `false` | | data | 展示数据 | Array\ | `[]` | | accordion | 手风琴模式,是否保持同级节点中只有一个节点展开 | boolean | `false` | | defaultExpandAll | 是否默认展开所有节点,当有 `expandedKeys` 时,`defaultExpandAll` 将失效 | boolean | `false` | @@ -105,6 +123,7 @@ app.use(FSelectTree); | blur | 当选择器失去焦点时触发 | event | | focus | 当选择器获得焦点时触发 | event | | clear | 点击清除按钮时触发 | event | +| filter | 过滤事件 | ( query: String) | ## SelectTree Methods diff --git a/docs/.vitepress/components/selectTree/multiple.vue b/docs/.vitepress/components/selectTree/multiple.vue index c0e12f47..230ee2b6 100644 --- a/docs/.vitepress/components/selectTree/multiple.vue +++ b/docs/.vitepress/components/selectTree/multiple.vue @@ -5,7 +5,9 @@ parent child -
+ + + child + + +