elementui中cascader

第一种：从后台获取数据

<template>
  <el-cascader
    ref="cascader"
    v-model="path"
    :options="dataPathOptions"
    placeholder="请选择数据路径"
    :props="props"
  />
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import FormBase from '@/components/form/FormBase';
import Fetch from '@/utils/fetch';
import { get } from 'lodash';
import { randomString } from '@/utils/random';

@Component
export default class SourceDataPath extends FormBase<string> {
  @Prop(Array)
  private dataPathOptions!: [];

  private dataOptions = []
  private get path (): string[] {
    if (!this.value) {
      return [];
    }
    return this.value.split('/');
  }

  private set path (val) {
    const value = val.join('/');
    this.$emit('update:value', value);
    this.$emit('input', value);
  }

  private selectPath: string[] = [];
  private props = {
    lazy: true,
    value: 'value',
    label: 'label',
    lazyLoad: (node: any, resolve: any) => {
      const { level, pathNodes } = node;
      this.selectPath = [];
      if (level === 0) {
        resolve([]);
        return;
      }
      if (level === 1) {
        this.dataOptions = this.dataPathOptions;
      }
      pathNodes.forEach((item: object, index: number) => {
        const value = pathNodes[index] ? pathNodes[index].value : '';
        this.selectPath.push(value);
      });
      Fetch.get(`lujing?base_path=${this.selectPath.join('/')}`, {}, false).then(response => {
        const nodes = response.contains.map((item: any) => ({
          label: item.name,
          value: item.name,
          leaf: item.last ? node.level : node.level >= 10
        }));
        resolve(Array.from(new Set(nodes)));
      });
    }
  };

  private async init () {
    // if (!this.path.length) {
    //   return;
    // }
    // const getChild = (level: number): any => {
    //   if (level > this.path.length - 1) {
    //     return;
    //   }
    //   return [{
    //     label: this.path[level],
    //     value: this.path[level],
    //     children: level === this.path.length - 1 ? null : getChild(level + 1)
    //   }];
    // };
    // const index = this.dataPathOptions.findIndex((item: any) => item.value === this.path[0]);
    // const options = JSON.parse(JSON.stringify(this.dataPathOptions));
    // if (index < 0 || !options.length) {
    //   return;
    // }
    // options[index].children = getChild(1);
    // this.dataOptions = options;
    await this.$nextTick();
    const cascader = this.$refs.cascader as any;
    if (cascader && this.value) {
      cascader.presentText = this.value;
      cascader.checkedValue = this.path;
      cascader.inputValue = this.value;
    }
  }

  @Watch('path', { immediate: true })
  private onPathChange () {
    this.init();
  }
}
</script>

<style scoped>
</style>

第二种：后台给了全部，前端自己封装

<template>
  <div class="cascaderOptions">
    <el-cascader
      ref="cascader"
      v-model="bindValue"
      :options="trainDateOptions"
      placeholder="请选择列车编组"
      :props="props"
      filterable
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import FormBase from '@/components/form/FormBase';
import Fetch from '@/utils/fetch';
import { CascaderOptions, TrainOptions, GroupOptions, CheckingOptions, Dict } from '@/model/search';
import { dateTime } from '@/utils/formatTime';

export function getCheckingIdList (checkingIdList: string[]) {
  // eslint-disable-next-line spellcheck/spell-checker
  if (!checkingIdList) {
    return;
  }
  // eslint-disable-next-line spellcheck/spell-checker
  return checkingIdList.map((item: string) => {
    return item[item.length - 1];/因为后台只需要最后一个字段
  });
}

@Component
export default class TrainsDateSelect extends FormBase<string[]> {
  // @Prop(Array)
  private trainDateOptions: CascaderOptions[]=[];
  @Prop(Object)
  private query !: {}

  private props = { multiple: true };

  private async getTrainsSelectData () {
    // eslint-disable-next-line spellcheck/spell-checker
    const resp = await Fetch.get('/api/checkings/query', { params: { ...this.query } });
    const selectMap: TrainOptions[] = resp.trains;
    if (selectMap) {
      const checkingToOptions = (checkingList: CheckingOptions[]) => checkingList.map((checking: CheckingOptions) => {
        return {
          value: checking.id,
          label: dateTime(checking.created_at) + checking.comment
        };
      });
      const groupByDateOption = (groups: GroupOptions[]) => groups.map((group: GroupOptions) => {
        return {
          value: group.date,
          label: group.date,
          // eslint-disable-next-line spellcheck/spell-checker
          children: checkingToOptions(group.checkings)
        };
      });

      (this.trainDateOptions as any) = selectMap.map((item: TrainOptions) => {
        return {
          value: item.serial,
          label: item.serial,
          children: groupByDateOption(item.group_by_date)
        };
      });
    }
  }

  @Watch('bindValue')
  private onValueChange () {
    if (!this.bindValue.length) {
      (this.$refs.cascader as any).$refs.panel.activePath = [];
    }
  }

  @Watch('query')
  private async queryChange () {
    await this.getTrainsSelectData();
  }
}
</script>

<style lang="scss" scoped>
@import '~@/css/variable';
.cascaderOptions {
  ::v-deep .el-input {
    width: 410px;
  }
  ::v-deep .el-cascader__tags{
    flex-wrap: nowrap;
    overflow: hidden;
    .el-tag .el-icon-close{
      right: 0px;
      top: 0px;
    }
    .el-cascader__search-input{
      background-color: $color-bgc-theme;
    }
  }
  ::v-deep .el-tag.el-tag--info{
    background-color: $color-bgc-theme;
    width: auto;
    color: $color-occasionally;
  }

}
</style>