<template>
  <a-row>
    <a-col span="4" style="text-algin:right">
      <h3>相关组件选择</h3>
    </a-col>
    <a-col span="18">
      <a-tree-select
        showSearch
        style="width: 100%"
        :value="value"
        :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="Please select"
        allowClear
        treeCheckable
        multiple
        :showCheckedStrategy="SHOW_PARENT"
        :treeDefaultExpandAll="false"
        @change="onChange"
        @search="onSearch"
        @select="onSelect"
        :treeData="treeData"
      ></a-tree-select>
    </a-col>
    <a-col span="2">
      <a-button type="primary">保存</a-button>
    </a-col>
  </a-row>
</template>
<script>
import { TreeSelect } from "ant-design-vue";
import { data1 } from "@/mock/function";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
// console.log("111111111111", data1);
export default {
  data() {
    return {
      treeData: data1,
      value: undefined,
      SHOW_PARENT
    };
  },
  methods: {
    onChange(value) {
      console.log(value);
      this.value = value;
    },
    onSearch() {
      console.log(...arguments);
    },
    onSelect() {
      console.log(...arguments);
    }
  }
};
</script>