要获取Element UI级联选择器当前选中的值,可以使用v-model来绑定一个变量,然后通过访问这个变量来获取选中的值。

以下是一个示例代码:

<template>
  <div>
    <el-cascader
      v-model="selectedOptions"
      :options="options"
      @change="handleCascaderChange"
    ></el-cascader>
    <p>当前选中的值: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 用于存储选中的值
      options: [
        {
          value: '1',
          label: '选项1',
          children: [
            {
              value: '1-1',
              label: '选项1-1'
            },
            {
              value: '1-2',
              label: '选项1-2'
            }
          ]
        },
        {
          value: '2',
          label: '选项2',
          children: [
            {
              value: '2-1',
              label: '选项2-1'
            },
            {
              value: '2-2',
              label: '选项2-2'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleCascaderChange(value) {
      console.log('选中的值:', value);
    }
  }
}
</script>

在上面的代码中,我们使用v-modelselectedOptions绑定到级联选择器上。在handleCascaderChange方法中,我们可以通过访问selectedOptions来获取选中的值。同时,我们在模板中显示了当前选中的值。

当用户选择级联选择器的选项时,selectedOptions会自动更新为选中的值,因此我们可以通过访问selectedOptions来获取当前选中的值

elementui级联选择器获取当前选中的值

原文地址: https://www.cveoy.top/t/topic/it1h 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录