我这个权限树怎么做el-select联动,用vue3

你可以这样实现：

1. 首先，在父组件中定义两个变量，用于存储选中的值：

<template>
  <div>
    <el-select v-model="selectedFirst" @change="handleChangeFirst">
      <el-option v-for="item in firstOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
    </el-select>
    <el-select v-model="selectedSecond" :options="secondOptions"></el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFirst: '',
      selectedSecond: '',
      firstOptions: [
        { id: 1, label: 'Option 1' },
        { id: 2, label: 'Option 2' },
        { id: 3, label: 'Option 3' }
      ],
      secondOptions: []
    };
  },
  methods: {
    handleChangeFirst(value) {
      // 重置第二个下拉框的选项
      this.selectedSecond = '';
      this.secondOptions = [];  // 清空第二个下拉框的选项

      // 根据选中的值，设置第二个下拉框的选项
      if (value === '1') {
        this.secondOptions = [
          { id: 11, label: 'Option 11' },
          { id: 12, label: 'Option 12' },
          { id: 13, label: 'Option 13' }
        ];
      } else if (value === '2') {
        this.secondOptions = [
          { id: 21, label: 'Option 21' },
          { id: 22, label: 'Option 22' },
          { id: 23, label: 'Option 23' }
        ];
      } else if (value === '3') {
        this.secondOptions = [
          { id: 31, label: 'Option 31' },
          { id: 32, label: 'Option 32' },
          { id: 33, label: 'Option 33' }
        ];
      }
    }
  }
};
</script>

2. 在第一个下拉框选择项改变时，设置第二个下拉框的选项。在 `handleChangeFirst` 方法中，根据选中的值，设置第二个下拉框的选项。同时，重置第二个下拉框的选项，以便重新渲染。

3. 在第二个下拉框中使用 `:options` 属性绑定选项。当第一个下拉框的选项改变时，第二个下拉框的选项会重新渲染。

这样，你就可以实现一个简单的权限树的 el-select 联动了。