下拉选项禁用设置

下拉选项框当没有子层内容时，这个选项框设置为不能被选中（禁用）：

<template>
  <el-cascader
    v-model="item.methods"
    :options="confirmDialog.data?.methods"
    :props="cascaderProps"
    placeholder="请选择"
    style="width: 200px;"
  />
</template>

<script setup>
import { reactive } from 'vue';

const item = reactive({
  methods: [],
});

// 数据类型介绍
const confirmDialog = reactive({
  data: {
    methods: [
      {
        value: '1',
        label: '选项1',
        children: [], // 空数组，应该禁用
      },
      {
        value: '2',
        label: '选项2',
        children: [
          {
            value: '2-1',
            label: '子选项2-1',
          },
        ],
      },
    ],
  },
});

// 下拉选项框当没有子层内容时，这个选项框设置为不能被选中
const cascaderProps = {
  //允许选择任意一级，最外层也可被选中
  //checkStrictly: true,
  disabled: (data) => {
    return data.children && data.children.length === 0;
  },
};
</script>

实现效果：（如果当前的选项没有子内容，这个父级的选项就被禁用，变成灰色，鼠标放上去显示无法点击）