Element UI 中 Cascader 级联选择器 默认选中

Element UI 中 Cascader 级联选择器 默认选中

Element UI 中 Cascader 级联选择器 默认选中和获取选中值

<template>
  <div class="block">
    <span>Cascader 级联选择器 默认选中</span>
    <el-cascader
        v-model="value"
        :options="options"
        @change="handleChange"
        ref="foo"
    ></el-cascader>
  </div>
</template>
<script>
/* 这是ElementUI */
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
/* 这是ElementUI */

export default {
  components: {},
  data() {
    const options = [
      {
        value: '1',
        label: '项目1',
        children: [{
          value: '1-1',
          label: 'HTML'
        }, {
          value: '1-2',
          label: 'JavaScript'
        }]
      },
      {
        value: '2',
        label: '项目3',
      }
    ];
    return {
      value: ['1', '1-1'], // 层级关系选中
      options
    }
  },
  methods: {
    handleChange(val) { // 获取选中val和label
      console.log(val, this.$refs.foo.getCheckedNodes()[0].label);
    }
  },
};
</script>