ElementUI 之 Cascader 级联选择器指定 value label，8个优秀的CSS实践

在ElementUI的Cascader级联选择器中，如果你想指定每个选项的value和label，你可以直接在数据源中包含这些属性。数据源应该是一个嵌套的对象数组，每个对象都有value和label属性。

以下是一个简单的例子：

<template>
  <el-cascader
    :options="options"
    v-model="selectedValue"
    :props="{ value: 'value', label: 'label' }"
    @change="handleChange"
  ></el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: [
        {
          label: '选项1',
          value: 'option1',
          children: [
            { label: '子选项1-1', value: 'child1-1' },
            { label: '子选项1-2', value: 'child1-2' }
          ]
        },
        {
          label: '选项2',
          value: 'option2',
          children: [
            { label: '子选项2-1', value: 'child2-1' },
            { label: '子选项2-2', value: 'child2-2' }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log('Selected value:', value);
    }
  }
};
</script>

在这个例子中，options是Cascader组件的数据源，每个选项都有label和value属性。:props属性用于指定Cascader组件使用哪些属性作为选项的值和标签。v-model用于双向绑定选中的值。