@moment-design/select-tag-search v0.0.5

使用组件

安装依赖

npm install @moment-design/select-tag-search --save

使用组件

import lSelectTag from '@moment-design/select-tag-search';

<template>
  <m-select
    ref="selectTag"
    v-bind="$attrs"
    :popup-visible="popupVisible"
    :filter-option="true"
    v-model:input-value="inputValue"
    class="l-select-tag"
  >
    <template v-if="btnText" #prefix>
      <span>
        <div class="l-btn-text" @click.stop="prefixClick">{{ btnText }}</div>
      </span>
    </template>
    <template v-for="name in Object.keys($slots)" #[name]="slotData">
      <slot :name="name" v-bind="slotData"></slot>
    </template>
  </m-select>
</template>
<script>
import { computed, ref } from 'vue';
import LSelectTag from '@moment-design/select-tag-search';
import { data as staffList } from './data.ts';
import ModalTree from './tree';
const data = ref([]);
const tree = ref();

const submit = (ids) => {
  data.value = ids;
};

const options = computed(() => {
  return flattenTree(JSON.parse(JSON.stringify(staffList))).map((v) => ({
    ...v,
    value: v.id,
    label: v.departmentName,
  }));

  function flattenTree(tree) {
    return tree.reduce((acc, node) => {
      acc.push(node);
      if (node.accountDepResults && node.accountDepResults.length > 0) {
        acc.push(...flattenTree(node.accountDepResults));
        delete node.accountDepResults;
      }

      return acc;
    }, []);
  }
});

const prefixClick = () => {
  tree.value.open({ ids: data.value });
};
</script>

API

Events

Props config

属性插槽同步组件库 select 组件, prefix 暴露事件 prefixClick