Vue之Cascader级联组件参数传递的坑

前端

2024-02-14 05:22:18

初识Cascader

Cascader级联选择器是一款常见的UI组件，常用于多级分类数据的选择。它允许用户逐级选择，直至最终确定所选项目。Cascader组件在Vue框架中备受青睐，其易用性和灵活性使其成为构建复杂表单的理想选择。

参数传递的必要性

在使用Cascader组件时，往往需要将选中的值传递给后端进行处理。这就涉及到参数传递的问题。参数传递是将数据从组件内传递到组件外或从一个组件传递到另一个组件的过程。在Vue中，参数传递通常通过props来实现。

参数传递的挑战

Cascader组件的参数传递并非一帆风顺，尤其是在涉及到多级选择的情况下。不同后端对参数传递的要求可能截然不同。因此，我们需要根据实际情况，采用不同的参数传递方案。

方案一：简单传递选中值的ID

对于一些简单的场景，我们可以直接传递选中值的ID。这种方案适用于后端只需要接收选中值的ID即可的情况。

<template>
  <Cascader v-model="value" :options="options" />
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          id: 1,
          label: '选项1',
          children: [
            {
              id: 2,
              label: '选项1-1',
            },
            {
              id: 3,
              label: '选项1-2',
            },
          ],
        },
        {
          id: 4,
          label: '选项2',
          children: [
            {
              id: 5,
              label: '选项2-1',
            },
            {
              id: 6,
              label: '选项2-2',
            },
          ],
        },
      ],
    };
  },
  methods: {
    submit() {
      const selectedIds = this.value.map(item => item.id);
      // 将选中的ID数组发送给后端
      this.$http.post('/api/submit', { selectedIds });
    },
  },
};
</script>

方案二：传递选中的完整对象

在某些情况下，后端可能需要接收选中项的完整对象，包括ID、名称等信息。此时，我们需要将选中的完整对象传递给后端。

<template>
  <Cascader v-model="value" :options="options" />
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          id: 1,
          label: '选项1',
          children: [
            {
              id: 2,
              label: '选项1-1',
            },
            {
              id: 3,
              label: '选项1-2',
            },
          ],
        },
        {
          id: 4,
          label: '选项2',
          children: [
            {
              id: 5,
              label: '选项2-1',
            },
            {
              id: 6,
              label: '选项2-2',
            },
          ],
        },
      ],
    };
  },
  methods: {
    submit() {
      // 将选中的完整对象数组发送给后端
      this.$http.post('/api/submit', { selectedObjects: this.value });
    },
  },
};
</script>

方案三：传递自定义格式的数据

在某些特殊场景下，后端可能需要接收自定义格式的数据。此时，我们需要根据后端的要求，将数据转换成指定格式再传递给后端。

<template>
  <Cascader v-model="value" :options="options" />
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          id: 1,
          label: '选项1',
          children: [
            {
              id: 2,
              label: '选项1-1',
            },
            {
              id: 3,
              label: '选项1-2',
            },
          ],
        },
        {
          id: 4,
          label: '选项2',
          children: [
            {
              id: 5,
              label: '选项2-1',
            },
            {
              id: 6,
              label: '选项2-2',
            },
          ],
        },
      ],
    };
  },
  methods: {
    submit() {
      const selectedValues = this.value.map(item => item.id);
      const formattedData = {
        categoryIds: selectedValues,
        // 根据后端要求，添加其他自定义数据
      };
      // 将自定义格式的数据发送给后端
      this.$http.post('/api/submit', { formattedData });
    },
  },
};
</script>