<template>
  <div class="block">
    <h1 class="demonstration">选中的值：{{ value }}</h1>
    <el-cascader
      :options="options"
      v-model="value"
      popper-class="cascaderBox"
      :props="defaultProps"
      clearable
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "10",
      defaultProps: {
        emitPath: false,
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children",
      },
      options: [
        {
          id: "1",
          name: "分类1",
          children: [
            {
              id: "10",
              name: "列表1",
            },
            {
              id: "11",
              name: "列表2",
            },
          ],
        },
        {
          id: "20",
          name: "分类2",
          children: [
            {
              id: "21",
              name: "列表1",
            },
            {
              id: "22",
              name: "列表2",
            },
          ],
        },
      ],
    };
  },
  methods: {
    visibleChange() {
      if (this.$refs["cascader"]) {
        this.$refs["cascader"].closeVisible = false;
      }
    },
  },
};
</script>
<style lang="less">
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>