Building upon Element UI 2.15.14, this customization introduces a specialized multi-selection mode that restricts selection to terminal nodes only. This enhancement is particularly useful for hierarchical data structures where intermediate nodes serve purely as containers.

Installation

Install the extended package via npm:

npm install @corp/element-leaf-select --save

Integration

Register the component globally in you're application entry point:

import Vue from 'vue'
import { Cascader } from '@corp/element-leaf-select'
import '@corp/element-leaf-select/theme-chalk/index.css'

Vue.use(Cascader)

Implementation

Implement the cascader witth leaf-only selection enabled:

<template>
  <div class="selector-container">
    <el-cascader
      v-model="selectedItems"
      :options="hierarchyData"
      :props="cascaderConfig"
      @change="handleSelection"
      clearable
    />
    <div class="output">
      Selected: {{ selectedItems }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      cascaderConfig: { 
        multiple: true, 
        leafOnly: true 
      },
      hierarchyData: [
        {
          value: 'electronics',
          label: 'Electronics',
          children: [
            {
              value: 'computers',
              label: 'Computers',
              children: [
                { value: 'laptops', label: 'Laptops' },
                { value: 'desktops', label: 'Desktops' },
                { value: 'tablets', label: 'Tablets' }
              ]
            },
            {
              value: 'audio',
              label: 'Audio',
              children: [
                { value: 'headphones', label: 'Headphones' },
                { value: 'speakers', label: 'Speakers' }
              ]
            }
          ]
        },
        {
          value: 'clothing',
          label: 'Clothing',
          children: [
            {
              value: 'mens',
              label: "Men's Wear",
              children: [
                { value: 'shirts', label: 'Shirts' },
                { value: 'trousers', label: 'Trousers' }
              ]
            },
            {
              value: 'womens',
              label: "Women's Wear",
              children: [
                { value: 'dresses', label: 'Dresses' },
                { value: 'tops', label: 'Tops' }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleSelection(values) {
      console.log('Selection changed:', values)
    }
  }
}
</script>

Configuration

To restrict multi-selection to leaf nodes exclusively, configure the props object with both standard and custom attributes:

{
  multiple: true,
  leafOnly: true  // Enables terminal node restriction
}

Note: Standard Element UI behavior is maintained for all other properties. The leafOnly property is the sole extansion to the existing API surface.