Vue3 封装 Element Plus el-tree-select 组件 - 双向绑定 & 下拉选项 (<script setup>)

<template>
  <el-tree-select v-model='selectedValue' :data='treeData' placeholder='Select' @change='handleChange' />
</template>
<script setup>
import { ref } from 'vue';
import { ElTreeSelect } from 'element-plus';

const treeData = [
  {
    id: 1,
    label: 'Node 1',
    children: [
      {
        id: 2,
        label: 'Node 1-1',
      },
      {
        id: 3,
        label: 'Node 1-2',
      },
    ],
  },
  {
    id: 4,
    label: 'Node 2',
    children: [
      {
        id: 5,
        label: 'Node 2-1',
      },
      {
        id: 6,
        label: 'Node 2-2',
      },
    ],
  },
];

const selectedValue = ref(null);

function handleChange(value) {
  selectedValue.value = value;
}
</script>
<style>
/* 可选的样式 */
</style>
<p>在上述示例中，我们使用 <code>&lt;script setup&gt;</code> 来导入 Vue 3 的 <code>ref</code> 函数和 Element Plus 的 <code>ElTreeSelect</code> 组件。<code>treeData</code> 是一个用于渲染树形结构的数据，<code>selectedValue</code> 是一个用于保存选择的值的响应式引用。</p>
<p><code>handleChange</code> 函数在选择发生变化时被调用，将选中的值更新到 <code>selectedValue</code> 中。</p>
<p>在模板中，我们使用 <code>v-model</code> 指令将 <code>selectedValue</code> 与 <code>el-tree-select</code> 的值进行双向绑定。<code>data</code> 属性用于传入树形结构的数据，<code>placeholder</code> 属性是选择框的占位符文本。</p>
<p>你可以根据需要自定义样式，并在 <code>&lt;style&gt;</code> 标签中添加相应的样式规则。</p>
<p>请确保已正确安装并导入 Vue 3 和 Element Plus 库。</p>