编写一个html页面 使用 vue版本是3版本 elementui组件 里面包括一个二级联动 一级下拉框为单选 二级下来框为多选一个三级联动 一级下拉框为单选 二级下拉框多选 三级下拉框多选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 with ElementUI</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/element-plus"></script>
</head>
<body>
  <div id="app">
    <h2>二级联动</h2>
    <el-select v-model="selectedOption" placeholder="请选择一级选项" @change="handleSelectChange">
      <el-option v-for="option in options" :key="option.id" :label="option.label" :value="option.id"></el-option>
    </el-select>
    <el-select v-model="selectedSubOptions" placeholder="请选择二级选项" multiple>
      <el-option v-for="option in subOptions" :key="option.id" :label="option.label" :value="option.id"></el-option>
    </el-select>
<pre><code>&lt;h2&gt;三级联动&lt;/h2&gt;
&lt;el-select v-model=&quot;selectedFirstOption&quot; placeholder=&quot;请选择一级选项&quot; @change=&quot;handleFirstSelectChange&quot;&gt;
  &lt;el-option v-for=&quot;option in firstOptions&quot; :key=&quot;option.id&quot; :label=&quot;option.label&quot; :value=&quot;option.id&quot;&gt;&lt;/el-option&gt;
&lt;/el-select&gt;
&lt;el-select v-model=&quot;selectedSecondOptions&quot; placeholder=&quot;请选择二级选项&quot; multiple @change=&quot;handleSecondSelectChange&quot;&gt;
  &lt;el-option v-for=&quot;option in secondOptions&quot; :key=&quot;option.id&quot; :label=&quot;option.label&quot; :value=&quot;option.id&quot;&gt;&lt;/el-option&gt;
&lt;/el-select&gt;
&lt;el-select v-model=&quot;selectedThirdOptions&quot; placeholder=&quot;请选择三级选项&quot; multiple&gt;
  &lt;el-option v-for=&quot;option in thirdOptions&quot; :key=&quot;option.id&quot; :label=&quot;option.label&quot; :value=&quot;option.id&quot;&gt;&lt;/el-option&gt;
&lt;/el-select&gt;
</code></pre>
  </div>
  <script>
    const { reactive, onMounted } = Vue
    const { ElMessage } = elementPlus

    const app = {
      setup() {
        const options = [
          { id: 1, label: '选项1' },
          { id: 2, label: '选项2' },
          { id: 3, label: '选项3' },
        ]

        const subOptions = [
          { id: 1, label: '子选项1', parentId: 1 },
          { id: 2, label: '子选项2', parentId: 1 },
          { id: 3, label: '子选项3', parentId: 2 },
          { id: 4, label: '子选项4', parentId: 2 },
          { id: 5, label: '子选项5', parentId: 3 },
          { id: 6, label: '子选项6', parentId: 3 },
        ]

        const firstOptions = [
          { id: 1, label: '一级选项1' },
          { id: 2, label: '一级选项2' },
          { id: 3, label: '一级选项3' },
        ]

        const secondOptions = [
          { id: 1, label: '二级选项1', parentId: 1 },
          { id: 2, label: '二级选项2', parentId: 1 },
          { id: 3, label: '二级选项3', parentId: 2 },
          { id: 4, label: '二级选项4', parentId: 2 },
          { id: 5, label: '二级选项5', parentId: 3 },
          { id: 6, label: '二级选项6', parentId: 3 },
        ]

        const thirdOptions = [
          { id: 1, label: '三级选项1', parentId: 1 },
          { id: 2, label: '三级选项2', parentId: 1 },
          { id: 3, label: '三级选项3', parentId: 2 },
          { id: 4, label: '三级选项4', parentId: 2 },
          { id: 5, label: '三级选项5', parentId: 3 },
          { id: 6, label: '三级选项6', parentId: 3 },
        ]

        const state = reactive({
          options,
          subOptions,
          selectedOption: null,
          selectedSubOptions: [],
          firstOptions,
          secondOptions,
          thirdOptions,
          selectedFirstOption: null,
          selectedSecondOptions: [],
          selectedThirdOptions: [],
        })

        function handleSelectChange() {
          const { selectedOption, subOptions } = state
          if (selectedOption) {
            const filteredSubOptions = subOptions.filter(option => option.parentId === selectedOption)
            state.selectedSubOptions = []
            state.subOptions = filteredSubOptions
          } else {
            state.selectedSubOptions = []
            state.subOptions = []
          }
        }

        function handleFirstSelectChange() {
          const { selectedFirstOption, secondOptions, thirdOptions } = state
          if (selectedFirstOption) {
            const filteredSecondOptions = secondOptions.filter(option => option.parentId === selectedFirstOption)
            state.selectedSecondOptions = []
            state.secondOptions = filteredSecondOptions

            const filteredThirdOptions = thirdOptions.filter(option => option.parentId === filteredSecondOptions[0].id)
            state.selectedThirdOptions = []
            state.thirdOptions = filteredThirdOptions
          } else {
            state.selectedSecondOptions = []
            state.secondOptions = []
            state.selectedThirdOptions = []
            state.thirdOptions = []
          }
        }

        function handleSecondSelectChange() {
          const { selectedSecondOptions, thirdOptions } = state
          if (selectedSecondOptions.length > 0) {
            const filteredThirdOptions = thirdOptions.filter(option => selectedSecondOptions.includes(option.parentId))
            state.selectedThirdOptions = []
            state.thirdOptions = filteredThirdOptions
          } else {
            state.selectedThirdOptions = []
            state.thirdOptions = []
          }
        }

        return {
          ...state,
          handleSelectChange,
          handleFirstSelectChange,
          handleSecondSelectChange,
        }
      },
    }

    Vue.createApp(app).mount('#app')
  </script>
</body>
</html

编写一个html页面 使用 vue版本是3版本 elementui组件 里面包括一个二级联动 一级下拉框为单选 二级下来框为多选一个三级联动 一级下拉框为单选 二级下拉框多选 三级下拉框多选

编写一个html页面使用 vue版本是3版本 elementui组件里面包括一个二级联动一级下拉框为单选二级下来框为多选一个三级联动一级下拉框为单选二级下拉框多选三级下拉框多选