vue-treeselect选项tooltips

在vue-treeselect中，可以通过设置`optionLabels`属性来为每个选项添加tooltips。具体实现方法如下：

1. 在`treeselect`组件中设置`optionLabels`属性，该属性是一个函数，接收一个选项对象作为参数，返回一个包含`label`和`title`属性的对象。

<template>
  <treeselect v-model="value" :options="options" :option-labels="getOptionLabels"></treeselect>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: [
        { id: 1, label: 'Option 1', tooltip: 'This is option 1' },
        { id: 2, label: 'Option 2', tooltip: 'This is option 2' },
        { id: 3, label: 'Option 3', tooltip: 'This is option 3' },
      ],
    };
  },
  methods: {
    getOptionLabels(option) {
      return {
        label: option.label,
        title: option.tooltip,
      };
    },
  },
};
</script>

2. 在选项的渲染模板中，使用`v-bind:title`指令将tooltips绑定到选项上。

<template>
  <treeselect v-model="value" :options="options" :option-labels="getOptionLabels">
    <template slot="option" slot-scope="{ option }">
      <div v-bind:title="option.title">{{ option.label }}</div>
    </template>
  </treeselect>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: [
        { id: 1, label: 'Option 1', tooltip: 'This is option 1' },
        { id: 2, label: 'Option 2', tooltip: 'This is option 2' },
        { id: 3, label: 'Option 3', tooltip: 'This is option 3' },
      ],
    };
  },
  methods: {
    getOptionLabels(option) {
      return {
        label: option.label,
        title: option.tooltip,
      };
    },
  },
};
</script>