赋能Cascader组件：巧用prop属性设置节点的label和value

2023-09-01 17:56:41

Cascader组件简介
Cascader组件是Element UI中一个强大的数据选择器，它可以帮助用户从多级数据结构中选择一个或多个值。Cascader组件通常用于地区选择、分类选择或任何其他涉及多级结构的数据选择场景。

2. 设置Cascader组件的默认值

在Cascader组件中设置默认值非常简单。您只需要在组件的v-model属性中指定一个默认值即可。例如，以下代码将设置Cascader组件的默认值为["中国", "广东省", "广州市"]:

<el-cascader
  v-model="selectedProvince"
  :options="provinces"
  value="['中国', '广东省', '广州市']"
>
</el-cascader>

3. 通过prop属性自定义节点的label和value值

默认情况下，Cascader组件的label和value值分别对应于数据对象的text和value属性。然而，您也可以通过prop属性来自定义节点的label和value值。例如，以下代码将自定义节点的label值为"name"属性，value值为"id"属性:

<el-cascader
  v-model="selectedProvince"
  :options="provinces"
  :props="{ label: 'name', value: 'id' }"
>
</el-cascader>

4. 使用递归方法获取选中节点的所有父节点的label值

有时，您可能需要获取选中节点的所有父节点的label值。例如，在地区选择场景中，您可能需要获取用户选择的省份、城市和地区的label值。您可以使用递归方法来实现这一目的。

以下代码展示了如何使用递归方法获取选中节点的所有父节点的label值:

function getParentLabels(node, labels = []) {
  if (node.parent) {
    labels.unshift(node.label)
    return getParentLabels(node.parent, labels)
  }
  return labels
}

5. 完整示例

以下是完整的示例代码，演示了如何在Cascader组件中设置默认值、自定义节点的label和value值以及使用递归方法获取选中节点的所有父节点的label值:

<template>
  <el-cascader
    v-model="selectedProvince"
    :options="provinces"
    :props="{ label: 'name', value: 'id' }"
  >
  </el-cascader>

  <p>选中省份：{{ selectedProvince }}</p>
  <p>父节点标签：{{ parentLabels }}</p>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const provinces = [
      {
        id: 1,
        name: '中国',
        children: [
          {
            id: 2,
            name: '广东省',
            children: [
              {
                id: 3,
                name: '广州市'
              }
            ]
          }
        ]
      }
    ]

    const selectedProvince = ref(['中国', '广东省', '广州市'])

    const parentLabels = computed(() => {
      if (selectedProvince.value.length === 0) {
        return []
      }

      const node = provinces.find(p => p.id === selectedProvince.value[0])
      return getParentLabels(node)
    })

    return {
      provinces,
      selectedProvince,
      parentLabels
    }
  }

  function getParentLabels(node, labels = []) {
    if (node.parent) {
      labels.unshift(node.label)
      return getParentLabels(node.parent, labels)
    }
    return labels
  }
}
</script>