@moment-design/choose-dp v0.1.17

选择部门/人员组件

使用组件

安装依赖

npm install @moment-design/choose-dp --save

使用组件

<template>
  <div style="margin-bottom: 16px">
    <m-space>
      <m-button type="primary" @click="handleD">选择部门</m-button>
      <m-button type="primary" @click="handleP">选择员工</m-button>
    </m-space>

    <!-- 已选数据 -->
    <div>
      <div style="margin-top: 16px">部门数据：{{ dataD }}</div>
      <div style="margin-top: 16px">员工数据：{{ dataP }}</div>
    </div>

    <!-- 选择部门 -->
    <ChooseDp
      ref="refLChooseDpD"
      :config="configD"
      @check="checkD"
    ></ChooseDp>

    <!-- 选择员工 -->
    <ChooseDp
      ref="refLChooseDpP"
      :config="configP"
      @check="checkP"
    ></ChooseDp>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChooseDp from '../index.vue';
import { getAccountUserList } from './api';

export default defineComponent({
  name: 'LDemo',
  components: {
    ChooseDp,
  },
  props: {},
  setup() {
    const refLChooseDpD = ref();
    const refLChooseDpP = ref();
    const dataD = ref();
    const dataP = ref();
    const configD = {

    };
    const configP = {
      api: getAccountUserList,
      type: 'p',
      data: [

      ],
      max: 3,
    };

    const handleD = () => refLChooseDpD.value.open();
    const handleP = () => refLChooseDpP.value.open();

    const checkD = (data: any) => (dataD.value = data);
    const checkP = (data: any) => (dataP.value = data);

    return {
      refLChooseDpD,
      refLChooseDpP,
      dataD,
      dataP,
      configD,
      configP,
      checkD,
      checkP,
      handleD,
      handleP,
    };
  },
});
</script>

Interface

export interface IChooseDp {
  api: any;
  type: 'd' | 'p';
  data?: Array<any>;
  max?: number;
}

API

Props

Events

Expose