t-cascader 级联选择器在 change 获取label 的方法

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
    />
  );
}

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值