ant组件中级联选择点击右侧的箭头才展示下一级的内容如何实现？

Question

ant组件中级联选择点击右侧的箭头才展示下一级的内容如何实现？

蒜香小青豆

21224

发布于
2023-11-17 湖北

更新于
2023-11-21

ant-design-vue中如何实现点击文本为选择，点击右侧的箭头为展开下一级的功能？

javascript ant-design-vue typescript

阅读 572

AI BotBETA

这个问题可以通过使用 Ant Design 的树形组件（Tree component）来解决。你需要使用 state 来跟踪选中的节点，并在点击事件中更新这个状态。

以下是一个基本的实现示例：

import React, { useState } from 'react';
import { Tree } from 'antd';

const { TreeNode } = Tree;

function Demo() {
  const [expandedKeys, setExpandedKeys] = useState([]);
  const [checkedKeys, setCheckedKeys] = useState([]);

  const onCheck = (checkedKeys) => {
    setCheckedKeys(checkedKeys);
  };

  const onExpand = (expandedKeys) => {
    setExpandedKeys(expandedKeys);
  };

  const data = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
        },
        {
          title: '0-0-1',
          key: '0-0-1',
        },
      ],
    },
    {
      title: '0-1',
      key: '0-1',
    },
  ];

  return (
    <Tree expandedKeys={expandedKeys} onExpand={onExpand}>
      {data.map(item => (
        <TreeNode title={item.title} key={item.key} disabled={checkedKeys.includes(item.key)} />
      ))}
    </Tree>
  );
}

export default Demo;

在上述代码中，我们首先定义了两个状态：expandedKeys 和 checkedKeys，分别用于跟踪展开的节点和选中的节点。然后，我们创建了一个数据对象，其中包含我们的树形结构。最后，我们将每个节点渲染为一个 TreeNode，并使用 disabled 属性来阻止选中的节点被展开。

1 个回答

得票最新

cnjs

2.2k2525

发布于
2023-11-17 浙江

这个demo好像可以实现这个需求哎，你看下：https://antdv.com/components/cascader-cn#components-cascader-...

至于样式可以使用css覆盖掉，交互也可以跟产品同学商量下

撰写回答