虚拟一个el-cascader的输入框,将预选值放进去,点击的时候再进行动态加载

Question

虚拟一个el-cascader的输入框,将预选值放进去,点击的时候再进行动态加载

Answer 1

以下是一个简单的示例，展示如何使用el-cascader组件，并在组件中预先填充数据并等待用户交互后再进行动态加载。

<template>
  <el-cascader
    :options="options"
    v-model="selectedOptions"
    @change="handleCascaderChange"
    :show-all-levels="false"
    :clearable="true"
    :filterable="true"
    :lazy="true"
  />
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
            },
            {
              value: 'daohang',
              label: '导航',
            },
          ],
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic',
              children: [
                {
                  value: 'layout',
                  label: 'Layout 布局',
                },
                {
                  value: 'color',
                  label: 'Color 色彩',
                },
              ],
            },
            {
              value: 'form',
              label: 'Form',
              children: [
                {
                  value: 'radio',
                  label: 'Radio 单选框',
                },
                {
                  value: 'checkbox',
                  label: 'Checkbox 多选框',
                },
              ],
            },
          ],
        },
      ],
      selectedOptions: [],
    };
  },
  methods: {
    handleCascaderChange(selectedOptions) {
      if (selectedOptions.length === 1 && selectedOptions[0] === 'zhinan') {
        // 动态加载
        this.$nextTick(() => {
          this.$set(
            this.options.find((option) => option.value === 'zhinan'),
            'children',
            [
              {
                value: 'shejiyuanze',
                label: '设计原则',
              },
              {
                value: 'daohang',
                label: '导航',
              },
              {
                value: 'zhinan-new',
                label: '指南 - 新增选项',
              },
            ],
          );
        });
      }
    },
  },
};
</script>

在这个示例中，我们在el-cascader组件中预先填充了一些数据。当用户选择“指南”这个选项时，我们会动态加载更多选项。在handleCascaderChange方法中，我们检查selectedOptions数组的长度，如果为1且其唯一的元素是'zhinan'，则表示用户选择了“指南”这个选项，我们会动态更新this.options的数据来添加更多选项。我们使用了$nextTick方法来确保更新后的数据能够正确地被渲染。