Vue TreeSelect 组件的选择最外层数据只有一条的操作可以通过设置组件的multiple属性为false来实现。当multiple属性为false时,组件只允许选择一条数据。

以下是一个示例:

<template>
  <div>
    <TreeSelect
      :data="treeData"
      :multiple="false"
      v-model="selectedData"
    ></TreeSelect>
  </div>
</template>

<script>
import TreeSelect from 'vue-treeselect';

export default {
  components: {
    TreeSelect
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Option 1',
          children: [
            {
              id: 11,
              label: 'Option 1.1'
            },
            {
              id: 12,
              label: 'Option 1.2'
            }
          ]
        },
        {
          id: 2,
          label: 'Option 2',
          children: [
            {
              id: 21,
              label: 'Option 2.1'
            },
            {
              id: 22,
              label: 'Option 2.2'
            }
          ]
        }
      ],
      selectedData: null
    };
  }
};
</script>

在上面的示例中,multiple属性设置为false,这样就只能选择一条数据。选中的数据会通过v-model绑定到selectedData变量上

vue TreeSelect 选择最外层数据只有一条

原文地址: http://www.cveoy.top/t/topic/irmW 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录