Pure Ui 文档
搜索文档 K

Appearance

级联选择器 ​

级联选择器组件。

数据模式 ​

通过 data-mode 属性数据模式：

  • lists - 二维数组列模式，每一项表示一列的数据
vue
<template>
	<pure-cascader
		data-mode="lists"
		:list="options"
		:values="values"
	></pure-cascader>
</template>

<script setup>
	import { ref } from "vue";
	import { onReady } from "@dcloudio/uni-app";

	// 列数据
	const options = ref([]);

	// 选中项
	const values = ref([]);

	// 生成数据
	onReady(() => {
		generateOptions();
	});

	// 生成 options 数据
	function generateOptions() {
		// 第一列
		const cols1 = [];
		for (let i = 1; i <= 20; i++) {
			cols1.push({
				label: `一列${i}`,
				value: `一列${i}`
			});
		}

		// 第二列
		const cols2 = [];
		for (let i = 1; i <= 20; i++) {
			cols2.push({
				label: `二列${i}`,
				value: `二列${i}`
			});
		}

		// 第三列
		const cols3 = [];
		for (let i = 1; i <= 20; i++) {
			cols3.push({
				label: `三列${i}`,
				value: `三列${i}`
			});
		}

		// 第四列
		const cols4 = [];
		for (let i = 1; i <= 20; i++) {
			cols4.push({
				label: `四列${i}`,
				value: `四列${i}`
			});
		}

		// 第五列
		const cols5 = [];
		for (let i = 1; i <= 20; i++) {
			cols5.push({
				label: `五列${i}`,
				value: `五列${i}`
			});
		}

		options.push(cols1, cols2, cols3, cols4, cols5);
	}
</script>
  • children - 默认，级联模式，数据为一维数组，每一项的 children-key 属性表示下一级数据
vue
<template>
	<pure-cascader
		data-mode="children"
		:list="list"
		:values="values"
	></pure-cascader>
</template>

<script setup>
	import { ref } from "vue";
	import { onReady } from "@dcloudio/uni-app";

	// 列数据
	const list = ref([]);

	// 选中项
	const values = ref([]);

	// 生成数据
	onReady(() => {
		generateList();
	});

	// 生成数据
	function generateList() {
		// 生成一级
		const level1 = [];
		for (let i = 1; i <= 20; i++) {
			level1.push({
				label: `一级${i}`,
				value: `一级${i}`
			});
		}

		// 生成二级
		const level2 = [];
		for (let i = 1; i <= 20; i++) {
			level2.push({
				label: `二级${i}`,
				value: `二级${i}`
			});
		}

		// 生成三级
		const level3 = [];
		for (let i = 1; i <= 20; i++) {
			level3.push({
				label: `三级${i}`,
				value: `三级${i}`
			});
		}

		// 生成四级
		const level4 = [];
		for (let i = 1; i <= 20; i++) {
			level4.push({
				label: `四级${i}`,
				value: `四级${i}`
			});
		}

		// 生成五级
		const level5 = [];
		for (let i = 1; i <= 20; i++) {
			level5.push({
				label: `五级${i}`,
				value: `五级${i}`
			});
		}

		// 组织数据
		// 把五级分级加到四级中
		level4.forEach((item) => {
			item.children = level5;
		});

		// 把四级加到三级中
		level3.forEach((item) => {
			item.children = level4;
		});

		// 把三级加到二级中
		level2.forEach((item) => {
			item.children = level3;
		});

		// 把二级加到一级中
		level1.forEach((item) => {
			item.children = level2;
		});

		list.value = level1;
	}
</script>

选中项 ​

  • 通过 indexes 设置选中项，其中每项表示对应列选中项的索引

提示

每次弹窗打开组件时，组件内部会重新计算一下选中项，所以在监听到确认事件中需更新 indexes 值，否则，组件打开后还是会显示上次选中的项。

vue
<template>
	<pure-cascader
		:list="list"
		:indexes="indexes"
		@onOk="onOk"
	></pure-cascader>
</template>

<script setup>
	import { ref } from "vue";

	// 选中项
	// 选中第一列的索引为 0，第二列的索引为 0
	const indexes = ref([0, 0]);

	// 列数据
	const list = ref([
		{
			label: "工具类",
			value: "1",
			children: [
				{ label: "钳子", value: "1-1" },
				{ text: "卡扣", value: "1-2" }
			]
		},
		{
			label: "家居类",
			value: "2",
			children: [
				{ label: "壁画", value: "2-1" },
				{ text: "凳子", value: "2-2" }
			]
		}
	]);

	// 确认事件
	function onOk(_indexes_, _items) {
		indexes.value = _indexes;
	}
</script>
  • 通过 values 设置选中项，其中每项表示对应列选中项的 value-key

提示

每次弹窗打开组件时，组件内部会重新计算一下选中项，所以在监听到确认事件中需更新 values 值，否则，组件打开后还是会显示上次选中的项。

vue
<template>
	<pure-picker
		:list="list"
		:values="values"
		value-key="value"
		@onOk="onOk"
	></pure-picker>
</template>

<script setup>
	import { ref } from "vue";

	// 选中项
	// 选中第一列的索引为 1，第二列的索引为 1
	// 上面组件中是将 value-key 设置成了 value，如果想把 label 设置为选中项的值，可以把 value-key 设置为 label，那么 values = ["家居类", "凳子"]
	const values = ref(["2", "2-2"]);

	// 列数据
	const list = ref([
		{
			label: "工具类",
			value: "1",
			children: [
				{ label: "钳子", value: "1-1" },
				{ text: "卡扣", value: "1-2" }
			]
		},
		{
			label: "家居类",
			value: "2",
			children: [
				{ label: "壁画", value: "2-1" },
				{ text: "凳子", value: "2-2" }
			]
		}
	]);

	// 确认事件
	function onOk(_indexes_, _items) {
		values.value = _items.map((item) => item.value);

		// 如果 value-key 为 label
		// values.value = _items.map((item) => item.label);
	}
</script>

禁用项 ​

如果某个项需要禁用，只需要在对应项中添加 disabled: true 即可。

vue
<template>
	<pure-cascader
		:list="list"
		:values="values"
		@onOk="onOk"
	></pure-cascader>
</template>

<script setup>
	import { ref } from "vue";

	// 选中项
	const values = ref([]);

	// 列数据
	const list = ref([
		{
			label: "工具类",
			value: "1",
			children: [
				{ label: "钳子", value: "1-1" },
				// 禁用项
				{ text: "卡扣", value: "1-2", disabled: true }
			]
		},
		{
			label: "家居类",
			value: "2",
			children: [
				{ label: "壁画", value: "2-1" },
				{ text: "凳子", value: "2-2" }
			]
		}
	]);
</script>

省市区选择器 ​

可以通过此组件快速简单的实现省市区选择器。

提示

省市区数据需自行组建，建议安装 element-china-area-data 包

bash
npm i element-china-area-data
vue
<template>
	<pure-cascader
		:list="regionData"
		:values="values"
		valueKey="label"
		@onOk="onOk"
	></pure-cascader>
</template>

<script setup>
	import { ref } from "vue";
	import { regionData } from "element-china-area-data";

	// 选中项
	const values = ref(["山东省", "济南市", "历下区"]);

	// 确认事件
	function onOk(_indexes_, _items) {
		values.value = _items.map((item) => item.label);
	}
</script>

属性 ​

名称类型默认值说明
listArray列数据
dataModeStringchildren数据模式
indexesArrayundefined选中项的索引
valuesArrayundefined选中项的值
labelKeyStringlabel字段标签 key
valueKeyStringlabel字段值 key
childrenKeyStringlabel字段子数据 key
placeholderString请选择标题提示文本
checkedIconNameString__checked选中图标名称
hoverClassStringpure-hover按下去的样式类
showBooleanfalse显示状态
maskBooleanfalse是否显示遮罩
maskClickableBooleantrue遮罩是否可点击关闭
titleString标题
showNotBooleantrue是否显示顶部取消按钮
notlTextString关闭顶部取消按钮文本
notThemeStringinfo顶部取消按钮主题
notOptsObject{}顶部取消按钮配置项 参考
showOkBooleantrue是否显示顶部确认按钮
okTextString确定顶部确认按钮文本
okThemeStringprimary顶部确认按钮主题
okOptsObject{}顶部确认按钮配置项 参考
showCancelBooleanfalse是否显示底部取消按钮
cancelTextString取消底部取消按钮文本
cancelThemeStringinfo底部取消按钮主题
cancelOptsObject{}底部取消按钮配置项 参考
showConfirmBooleanfalse是否底部显示确认按钮
confirmTextString确认底部确认按钮文本
confirmThemeStringprimary底部确认按钮主题
confirmOptsObject{}底部确认按钮配置项 参考
headerLineBooleanfalse是否显示 Header 下边框
footerLineBooleanfalse是否显示 Footer 上边框
buttonLineBooleanfalse是否显示底部按钮分割线
widthString宽度
heightString高度
maxWidthString最大宽度
maxHeightString最大高度

事件 ​

名称参数说明
onClose点击遮罩关闭事件
onNot顶部取消按钮点击事件
onOkindexes: 选中项的下标; items: 选中项的数据顶部确认按钮点击事件
onCancel底部取消按钮点击事件
onConfirmindexes: 选中项的下标; items: 选中项的数据底部确认按钮点击事件
onChangeindexes: 选中项的下标; items: 选中项的数据滚动切换事件

样式变量 ​

名称说明
--pure-cascader-height弹窗内容高度
--pure-cascader-titles-padding标题内边距
--pure-cascader-titles-border-bottom-width标题下边框宽度
--pure-cascader-titles-border-bottom-color标题下边框颜色
--pure-cascader-titles-border-bottom-style标题下边框类型
--pure-cascader-titles-font-size标题字体大小
--pure-cascader-titles-font-weight标题字体粗细
--pure-cascader-titles-color标题字体颜色
--pure-cascader-titles-item-padding标题项内边距
--pure-cascader-titles-items-gap标题项间距
--pure-cascader-column-items-padding列容器内边距
--pure-cascader-item-icon-font-size选中图标字体大小
--pure-cascader-item-icon-font-weight选中图标字体粗细
--pure-cascader-item-icon-color选中图标字体颜色
--pure-cascader-item-icon-transition选中图标过渡效果
--pure-cascader-item-active-color选中项字体颜色
--pure-cascader-item-disabled-color禁用项字体颜色
--pure-cascader-item-disabled-opacity禁用项透明度

Pure Ui 文档

Copyright © 2025 济南晨霜信息技术有限公司