用一点小妙招，解决 Element-UI 级联选择器的终极难题！

2024-01-22 15:56:42

问题

在使用 Element-UI 级联选择器组件时，如果最后一级数据为空，选择器将显示“暂无数据”的提示。这可能会对用户造成困扰，并影响用户体验。

解决方案

为了解决此问题，我们可以使用一个巧妙的技巧：在最后一级数据为空时，我们可以在数据源中添加一个特殊的选项，例如 { label: '暂无数据', value: null }。这样，当最后一级数据为空时，选择器将显示这个特殊的选项，而不是“暂无数据”的提示。

const options = [
  {
    label: '一级选项 1',
    value: '1',
    children: [
      {
        label: '二级选项 1-1',
        value: '1-1',
        children: [
          {
            label: '三级选项 1-1-1',
            value: '1-1-1',
          },
          {
            label: '三级选项 1-1-2',
            value: '1-1-2',
          },
        ],
      },
      {
        label: '二级选项 1-2',
        value: '1-2',
        children: [
          {
            label: '三级选项 1-2-1',
            value: '1-2-1',
          },
        ],
      },
    ],
  },
  {
    label: '一级选项 2',
    value: '2',
    children: [], // 最后一级数据为空
  },
];