hotwiredstimulus 和 tailwindcss 实现像element-plus 多级嵌套 Cascader 级联选择器

首先，需要安装 @hotwired/stimulus 和 tailwindcss。在 HTML 文件中引入这两个库。

然后，在 JavaScript 文件中定义一个控制器（controller），用于实现级联选择器的逻辑。可以使用 @hotwired/stimulus 提供的 Controller 类来定义控制器，如下所示：

import { Controller } from "@hotwired/stimulus";

export default class CascaderController extends Controller {
  static values = { data: Array };

  connect() {
    // 初始化级联选择器
  }

  select(event) {
    // 处理选择事件
  }
}

在 connect 方法中，可以使用 this.dataValue 访问到传入的级联数据，然后根据数据初始化级联选择器。

在 select 方法中，可以获取到用户选择的值，然后根据选择的值更新级联选择器的状态。

接下来，可以在 HTML 文件中使用控制器来渲染级联选择器。例如：

<div data-controller="cascader" data-cascader-data-value="[...]">
  <select data-target="cascader.level1"></select>
  <select data-target="cascader.level2"></select>
  <select data-target="cascader.level3"></select>
</div>

其中，data-controller 属性指定了使用的控制器，data-cascader-data-value 属性指定了要传入的级联数据。data-target 属性指定了要绑定到控制器的选择器（selector）。在控制器中，可以使用 this.level1Targets 等属性访问到这些选择器。

最后，在 CSS 文件中使用 tailwindcss 的样式来美化级联选择器即可。