el-cascader自定义选项框

el-cascader 是一个基于 Element UI 的级联选择器组件，它提供了可自定义的选项框。要自定义 el-cascader 的选项框，你可以使用 scoped slot 来定制选项的渲染方式。

下面是一个示例，演示如何自定义 el-cascader 的选项框：

<template>
  <el-cascader v-model="selectedOptions" :options="options">
    <template #default="{ node, data }">
      <span>{{ data.label }}</span>
      <span v-if="data.children && data.children.length > 0"> ({{ data.children.length }})</span>
    </template>
  </el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: '1',
          label: 'Option 1',
          children: [
            {
              value: '1-1',
              label: 'Option 1-1'
            },
            {
              value: '1-2',
              label: 'Option 1-2',
              children: [
                {
                  value: '1-2-1',
                  label: 'Option 1-2-1'
                },
                {
                  value: '1-2-2',
                  label: 'Option 1-2-2'
                }
              ]
            }
          ]
        },
        {
          value: '2',
          label: 'Option 2'
        },
        {
          value: '3',
          label: 'Option 3'
        }
      ]
    };
  }
};
</script>

在上面的示例中，我们使用了 `#default` 来定义选项框的渲染方式。在这个示例中，我们将选项的 label 显示为文本，并在有子选项的情况下显示子选项的数量。