40.1自定义组建el-cascader

1.子组件

<template>
  <el-cascader v-model="bindValue" :options="options" :size="size" :clearable='clearable' :props="props">
  </el-cascader>
</template>

<script>
export default {
  data() {
    return {};
  },
  //实现子组件，父级组件双向绑定
  mounted() {
    this.bindValue = this.value;
  },
  computed: {
    bindValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("toChangeSelection", val);
      },
    },
  },

  props: {
    options: Array,
    default: () => {
      return {};
    },
    value: Array,
    default: () => {
      return [];
    },
    clearable: Boolean,
    default: () => {
      return false;
    },
    props: Object,
    size: String,
    default: () => {
      return "small";
    },
  },
  methods: {},
};
</script>

<style>
</style>

2，父级组件

<template>
  <div>
    <NewCascade @toChangeSelection="changeAssetTypeList" :value="assetTypeId" :options="assetTypeList"
      :props="{multiple: false }" size="medium" style="width: 174px" :clearable="true" />
  </div>
</template>

<script>
import NewCascade from "./elCascader/index.vue";
export default {
  data() {
    return {
      assetTypeId: ["zhinan", "daohang", "dingbudaohang"],
      assetTypeList: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  components: {
    NewCascade,
  },
  methods: {
    changeAssetTypeList(val) {
      this.assetTypeId = val;
    },
  },
};
</script>

<style>
</style>