const options = ref([
{
label: '选项1',
value: '1',
children: true,
},
{
label: '选项2',
value: '2',
children: true,
},
]);
const load = (node) =>
new Promise((resolve) => {
setTimeout(() => {
let nodes = [];
if (node.level < 2) {
nodes = [
{
label: `${node.label}.1`,
children: node.level < 1,
},
{
label: `${node.label}.2`,
children: node.level < 1,
},
];
}
resolve(nodes);
}, 300);
});
<t-form-item label="" name="address">
<t-cascader v-model="formData.address" ref="cascaderRef" :options="options" value-type="full" clearable :load="load" @change="onChange" />
</t-form-item>
const onChange = (value, ctx) =>{
console.log("onChange value", value);
console.log("onChange ctx", ctx.node);
if(ctx.node) {
// 避免 clear 的时候
console.log(
ctx.node
.getPath()
.map(({ label }) => label)
.join('/')
);
}
}
t-ascader 级联选择器在 change 获取label 的方法 (Vue next 1.9.8)版本(动态加载)测试案例
React 可参考如下
import React, { useState } from 'react';
import { Cascader } from 'tdesign-react';
import type { CascaderProps, CascaderValue } from 'tdesign-react';
export default function Example() {
const [value, setValue] = useState<CascaderValue>([]);
const [options] = useState([
{
label: '选项一',
value: '1',
children: [
{
label: '子选项一',
value: '1.1',
},
{
label: '子选项二',
value: '1.2',
},
{
label: '子选项三',
value: '1.3',
},
],
},
{
label: '选项二',
value: '2',
children: [
{
label: '子选项一',
value: '2.1',
},
{
label: '子选项二',
value: '2.2',
},
],
},
]);
const onChange: CascaderProps['onChange'] = (value, ctx) => {
console.log(
ctx.node
.getPath()
.map(({ label }) => label)
.join('/')
);
setValue(value);
};
return (
<Cascader
options={options}
onChange={onChange}
value={value}
size="medium"
clearable
/>
);
}