elementui级联选择器绑定默认值;element 级联选择器默认值

在使用 Element UI 的级联选择器（Cascader）时，绑定默认值是一个常见的需求。本文将介绍如何在 Vue 项目中实现级联选择器的默认值绑定，并提供多种解决方案。

1. 解决方案概述

Element UI 的级联选择器可以通过 v-model 绑定一个数组来设置默认值。这个数组中的每个元素对应级联选择器中的每一级选项。我们可以通过在组件初始化时设置这个数组来实现默认值的绑定。

2. 基本实现方法

2.1 使用 v-model 绑定默认值

首先，我们需要在 Vue 组件中定义一个数据属性来存储级联选择器的默认值。然后通过 v-model 将这个数据属性绑定到级联选择器上。

vue

  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="{ checkStrictly: true }"
    @change="handleChange"</p>

<blockquote>
  <p>
  </p>
</blockquote>


export default {
  data() {
    return {
      selectedOptions: ['1', '1-1'], // 默认值
      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: {
    handleChange(value) {
      console.log('Selected:', value);
    },
  },
};


<p>

2.2 动态设置默认值

如果默认值是动态获取的，可以在 mounted 钩子中设置 selectedOptions。

vue

  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="{ checkStrictly: true }"
    @change="handleChange"</p>

<blockquote>
  <p>
  </p>
</blockquote>


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',
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.setDefaultOptions();
  },
  methods: {
    setDefaultOptions() {
      // 模拟从后端获取默认值
      setTimeout(() => {
        this.selectedOptions = ['1', '1-1'];
      }, 1000);
    },
    handleChange(value) {
      console.log('Selected:', value);
    },
  },
};


<p>

2.3 使用计算属性设置默认值

如果默认值依赖于其他数据，可以使用计算属性来动态计算默认值。

vue

  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="{ checkStrictly: true }"
    @change="handleChange"</p>

<blockquote>
  <p>
  </p>
</blockquote>


export default {
  data() {
    return {
      defaultOptions: ['1', '1-1'], // 初始默认值
      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',
            },
          ],
        },
      ],
    };
  },
  computed: {
    selectedOptions: {
      get() {
        return this.defaultOptions;
      },
      set(value) {
        this.defaultOptions = value;
      },
    },
  },
  methods: {
    handleChange(value) {
      console.log('Selected:', value);
    },
  },
};


<p>