tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
428
1.8m

极联器 xCascader ​

预览

介绍 ​

极联选择器。v-model 为单个 id 是单选，为数组是多选。列表面板走 x-virtual-list。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-cascader/x-cascader.uvue

使用 ​

ts

<x-cascader></x-cascader>

Props 属性 ​

名称说明类型默认值
width宽,可以为auto
string'auto'
height高，不可为auto。
string'150'
list数据结构
Array():CASCADER_ITEM_INFO[] => [] as CASCADER_ITEM_INFO[]
modelValue当前选中。单个 id（string\
number）为单选，数组为多选。
CASCADER_VALUE'' as CASCADER_VALUE
fontSize项目文字大小id
string"16"
itemTextColor选项项目未选中的文字颜色
string"#333333"
darkItemTextColor选项项目未选中的暗黑文字颜色，空值是取白色
string""
itemActiveColor选项项目选中的文字颜色，空值取全局主题
string""
sliderContentBgColor内容区域背景颜色
string'rgba(0,0,0,0)'
showCurrentBtn有下级时是否显示本级勾选图标。点图标选中本级，点行仍进入下一级。
booleanfalse

Events 事件 ​

名称参数说明
change`ids: CASCADER_ID[]CASCADER_ID`
cellClickitem: CASCADER_ITEM_INFOparentIndex: numberchildrenIndex: number点击项目时触发
confirmid: unionids: CASCADER_ID[]选中叶子或勾选本级时触发
update:modelValue-等同v-model。单选为 id，多选为 id 数组

Slots 插槽 ​

名称说明数据
header顶部头菜单导航插槽,你可以完全写自己的导航样式menus: CASCADER_ITEM_INFO[]

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/biaodan/cascader

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">极联器 xCascader</x-text>
			<x-text color="#999999" >v-model 传单个 id 是单选，传数组是多选。数据项可自行挂额外字段。</x-text>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">单选（可无限级）</x-text>
			<x-divider ></x-divider>
			<x-cascader :showCurrentBtn="true" v-model="selecteds1" :list="list" height="200"></x-cascader>
			<x-sheet color="#f5f5f5" dark-color="#333" :margin="['0','16']">
				<x-text color="#999999">选中的值：{{selecteds1}}</x-text>
			</x-sheet>
			<x-button class="mt-32" @click="selecteds1 = '1-4-1'" :block="true">动态赋值</x-button>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">多选（v-model 传数组）</x-text>
			<x-divider ></x-divider>
			<x-cascader :showCurrentBtn="true" v-model="selecteds2" :list="list" height="220"></x-cascader>
			<x-sheet color="#f5f5f5" dark-color="#333" :margin="['0','16']">
				<x-text color="#999999">选中的值：{{selecteds2}}</x-text>
			</x-sheet>
			<x-button class="mt-32" @click="selecteds2 = ['1-2', '4']" :block="true">动态赋值</x-button>
		</x-sheet>
		
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import type { CASCADER_ID, CASCADER_ITEM_INFO } from "@/uni_modules/tmx-ui"
	
	const items = [
		{ title: '广东省', id: "199", code: 'GD', extra: 1 } as CASCADER_ITEM_INFO,
		{
			title: '江西',
			id: "1-1",
			children: [
				{
					title: '南昌',
					id: "1",
					children: [
						{ title: '青山湖区', id: "1-2" } as CASCADER_ITEM_INFO,
						{ title: '高新区', id: "1-3" } as CASCADER_ITEM_INFO,
						{ title: '红谷滩区', id: "1-4" } as CASCADER_ITEM_INFO,
						{

							title: '东湖区', id: "1-5",

							children: [
								{ title: '三级-青山湖区', id: "1-2-1" } as CASCADER_ITEM_INFO,
								{ title: '三级-高新区', id: "1-3-1" } as CASCADER_ITEM_INFO,
								{ title: '三级-红谷滩区', id: "1-4-1" } as CASCADER_ITEM_INFO,
								{ title: '三级-东湖区', id: "1-5-1" } as CASCADER_ITEM_INFO,
							] as CASCADER_ITEM_INFO[],

						} as CASCADER_ITEM_INFO,
					] as CASCADER_ITEM_INFO[],

				} as CASCADER_ITEM_INFO,
				{ title: '九江', id: "2" } as CASCADER_ITEM_INFO,
				{ title: '赣州', id: "8", disabled: true } as CASCADER_ITEM_INFO,
				{ title: '吉安', id: "9" } as CASCADER_ITEM_INFO,
				{ title: '抚州', id: "10" } as CASCADER_ITEM_INFO,
			] as CASCADER_ITEM_INFO[],
		} as CASCADER_ITEM_INFO,
		{
			title: '江苏',
			id: "4-1",
			children: [
				{ title: '常熟', id: "4" } as CASCADER_ITEM_INFO,
				{ title: '苏州', id: "5" } as CASCADER_ITEM_INFO,
				{ title: '小上海', id: "6" } as CASCADER_ITEM_INFO,
			] as CASCADER_ITEM_INFO[],
		} as CASCADER_ITEM_INFO,
		{ title: '安徽(被禁用)', disabled: true, id: "7" } as CASCADER_ITEM_INFO,
		{ title: '湖南', id: "99" } as CASCADER_ITEM_INFO,
	] as CASCADER_ITEM_INFO[];
	
	const list = ref<CASCADER_ITEM_INFO[]>(items)
	const selecteds1 = ref<CASCADER_ID>("")
	const selecteds2 = ref<CASCADER_ID[]>([])
	
</script>

<style lang="scss">

</style>
最近更新