vue如何封装一个树形选择组件

封装一个树形选择组件可以分为以下几个步骤：

1. 定义组件的 props：需要传入一个树形结构的数据，以及选中的节点的值。

props: {
  treeData: {
    type: Array,
    required: true
  },
  selectedValue: {
    type: String,
    default: ''
  }
}

2. 在组件中渲染树形结构：可以使用递归组件来渲染，每个节点使用一个复选框来表示是否选中，以及一个展开/收起按钮来展示子节点。

<template>
  <div>
    <ul>
      <li v-for="node in treeData" :key="node.id">
        <label>
          <input type="checkbox" :value="node.value" :checked="isSelected(node)">
          {{node.label}}
        </label>
        <button v-if="node.children" @click="toggle(node)"> {{node.expanded ? '-' : '+'}} </button>
        <tree-select v-if="node.children && node.expanded" :treeData="node.children" :selectedValue="selectedValue" @input="onInput"></tree-select>
      </li>
    </ul>
  </div>
</template>

3. 实现选中节点的处理：当选中一个节点时，需要将它的值加入到选中节点的列表中；取消选中时，需要将它从选中节点的列表中删除。

methods: {
  isSelected(node) {
    return this.selectedValue.includes(node.value)
  },
  onInput(value) {
    this.$emit('input', value)
  }
}

4. 实现展开/收起节点的处理：当展开/收起一个节点时，需要将它的子节点渲染或移除。

methods: {
  toggle(node) {
    node.expanded = !node.expanded
  }
}

最终的代码可以参考下面的例子：

<template>
  <div>
    <ul>
      <li v-for="node in treeData" :key="node.id">
        <label>
          <input type="checkbox" :value="node.value" :checked="isSelected(node)">
          {{node.label}}
        </label>
        <button v-if="node.children" @click="toggle(node)"> {{node.expanded ? '-' : '+'}} </button>
        <tree-select v-if="node.children && node.expanded" :treeData="node.children" :selectedValue="selectedValue" @input="onInput"></tree-select>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeSelect',
  props: {
    treeData: {
      type: Array,
      required: true
    },
    selectedValue: {
      type: String,
      default: ''
    }
  },
  methods: {
    isSelected(node) {
      return this.selectedValue.includes(node.value)
    },
    onInput(value) {
      this.$emit('input', value)
    },
    toggle(node) {
      node.expanded = !node.expanded
    }
  }
}
</script>