Cascader级联选择器回显（两种方法）

引言

在许多应用程序中，我们需要用户通过级联选择器选择一组选项。例如，用户可以选择一个国家，然后选择该国家的一个省份，再然后选择该省份的一个城市。

Cascader 是一个流行的 JavaScript 库，可用于创建级联选择器。它功能强大且易于使用，并且支持多种自定义选项。

在本文中，我们将讨论如何使用 Cascader 库创建级联选择器，以及如何回显所选的数据。我们将提供两种方法来回显数据：

• 使用 value 属性
• 使用 emit 事件

方法一：使用 value 属性

1. 准备数据

在使用 value 属性回显数据之前，我们需要准备数据。数据应是一个嵌套数组，其中每个元素都是一个对象。对象应具有 value 和 label 属性，其中 value 属性是选项的唯一标识符，而 label 属性是选项的显示名称。

例如，以下数据可用于创建级联选择器，其中用户可以选择一个国家、一个省份和一个城市：

const data = [
  {
    value: 'china',
    label: '中国',
    children: [
      {
        value: 'beijing',
        label: '北京',
      },
      {
        value: 'shanghai',
        label: '上海',
      },
      {
        value: 'shenzhen',
        label: '深圳',
      },
    ],
  },
  {
    value: 'usa',
    label: '美国',
    children: [
      {
        value: 'new-york',
        label: '纽约',
      },
      {
        value: 'los-angeles',
        label: '洛杉矶',
      },
      {
        value: 'chicago',
        label: '芝加哥',
      },
    ],
  },
];

2. 创建级联选择器

创建级联选择器时，我们需要指定 data 属性和 value 属性。data 属性用于指定数据源，而 value 属性用于指定初始选中的选项。

<cascader :data="data" :value="['china', 'beijing']"></cascader>

3. 回显数据

当用户更改级联选择器的值时，我们可以使用 value 属性来回显所选的数据。

const cascader = this.$refs.cascader;
console.log(cascader.value); // ['china', 'beijing']

方法二：使用 emit 事件

1. 准备数据

使用 emit 事件回显数据时，数据准备与使用 value 属性回显数据时相同。

2. 创建级联选择器

创建级联选择器时，我们需要指定 data 属性。

<cascader :data="data"></cascader>

3. 监听 change 事件

当用户更改级联选择器的值时，我们可以监听 change 事件来回显所选的数据。

<cascader :data="data" @change="handleChange"></cascader>

4. 定义 handleChange 方法

在 handleChange 方法中，我们可以使用 $refs 对象来获取级联选择器的引用，然后使用 value 属性来获取所选的数据。

methods: {
  handleChange(value) {
    console.log(value); // ['china', 'beijing']
  },
},

结论

本文讨论了如何使用 Cascader 库创建级联选择器，以及如何回显所选的数据。我们提供了两种方法来回显数据：使用 value 属性和使用 emit 事件。