XPicker 数据选择器

示例

基础用法

输入关键字回车查询

No data

<template>
  <div>
    <XPicker
      ref="pickerRef"
      value-key="id"
      label-key="name"
      query-key="name"
      v-model="pickerValue"
      :columns="columns"
      :fields="fields"
      :loader="asyncLoader"
      @change="onChange"
      @picked="onPicked"></XPicker>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { XPicker, type PickerFields } from '@vtj/ui';
  import { data } from './data';
  const pickerValue = ref();

  const columns = ref([
    {
      field: 'id',
      title: 'ID'
    },
    {
      field: 'name',
      title: '姓名',
      filters: [{ value: '' }],
      filterRender: {
        name: 'XInput'
      }
    },

    {
      field: 'sex',
      title: '性别',
      filters: [{ value: '' }],
      filterRender: {
        name: 'XSelect',
        props: {
          options: [
            { label: '男', value: 1 },
            { label: '女', value: 0 }
          ]
        }
      }
    },
    {
      field: 'age',
      title: '年龄'
    },
    {
      field: 'intro',
      title: '简介'
    },
    {
      field: 'join',
      title: '入职日期'
    },
    {
      field: 'create',
      title: '创建时间'
    }
  ]);

  const fields: PickerFields = [
    {
      label: '姓名',
      name: 'name',
      editor: 'text',
      props: {}
    },
    {
      label: '姓别',
      name: 'sex',
      editor: 'select',
      disabled: true
    }
  ];

  const asyncLoader = async () => {
    return data;
  };

  const onChange = (data: any) => {
    console.log('change', data);
  };

  const onPicked = (raw: any) => {
    console.log('onPicked', raw);
  };
</script>

<style scoped></style>

搭配 XField 使用

单选

输入关键字回车查询

No data

多选

输入关键字回车查询

No data

多选对象值

• ABC

No data

modelValue1:

modelValue2: []

modelValue3: [ { "id": "123", "name": "ABC" } ]

<template>
  <div>
    <XField label="单选">
      <template #editor>
        <XPicker
          v-model="modelValue1"
          ref="pickerRef"
          value-key="id"
          label-key="name"
          query-key="name"
          :columns="columns"
          :fields="fields"
          :loader="asyncLoader"
          @change="onChange"
          @picked="onPicked"></XPicker>
      </template>
    </XField>
    <XField label="多选">
      <template #editor>
        <XPicker
          v-model="modelValue2"
          multiple
          :max-collapse-tags="5"
          value-key="id"
          label-key="name"
          query-key="name"
          :columns="columns"
          :fields="fields"
          :loader="loader"
          @change="onChange"
          @picked="onPicked"></XPicker>
      </template>
    </XField>
    <XField label="多选对象值">
      <template #editor>
        <XPicker
          v-model="modelValue3"
          multiple
          raw
          append
          :max-collapse-tags="5"
          value-key="id"
          label-key="name"
          query-key="name"
          :default-query="defaultQuery"
          :columns="columns"
          :fields="fields"
          :loader="loader"
          @change="onChange"
          @picked="onPicked"></XPicker>
      </template>
    </XField>
    <div>modelValue1: {{ modelValue1 }}</div>
    <div>modelValue2: {{ modelValue2 }}</div>
    <div>modelValue3: {{ modelValue3 }}</div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, type Ref, nextTick } from 'vue';
  import {
    XPicker,
    XField,
    type PickerColumns,
    type PickerFields
  } from '@vtj/ui';
  import { data } from './data';

  const pickerRef = ref();
  const modelValue1 = ref();
  const modelValue2 = ref([]);
  const modelValue3 = ref([
    {
      id: '123',
      name: 'ABC'
    }
  ]);

  const columns: Ref<any> = ref([]);

  const columns2: PickerColumns = [
    {
      field: 'id',
      title: 'ID'
    },
    {
      field: 'name',
      title: '姓名',
      filters: [{ value: '' }],
      filterRender: {
        name: 'XInput'
      }
    },

    {
      field: 'sex',
      title: '性别',
      filters: [{ value: '' }],
      filterRender: {
        name: 'XSelect',
        props: {
          options: [
            { label: '男', value: 1 },
            { label: '女', value: 0 }
          ]
        }
      }
    },
    {
      field: 'age',
      title: '年龄'
    },
    {
      field: 'intro',
      title: '简介'
    },
    {
      field: 'join',
      title: '入职日期'
    },
    {
      field: 'create',
      title: '创建时间'
    }
  ];

  const fields: PickerFields = [
    {
      label: '姓名',
      name: 'name',
      editor: 'text',
      props: {}
    },
    {
      label: '姓别',
      name: 'sex',
      editor: 'select',
      disabled: true
    },
    {
      label: '入职时间开始',
      name: 'join-start',
      editor: 'date',
      props: {
        valueFormat: 'YYYY-MM-DD'
      }
    },
    {
      label: '入职时间结束',
      name: 'join-end',
      editor: 'date',
      props: {
        valueFormat: 'YYYY-MM-DD'
      }
    },
    {
      label: '年龄大于',
      name: 'age-start',
      editor: 'number'
    },
    {
      label: '年龄小于',
      name: 'age-end',
      editor: 'number'
    }
  ];

  const loader: any = async (params: any) => {
    console.log('do load', params);
    return data;
  };

  const asyncLoader = ref();

  const defaultQuery = () => {
    return {
      name: 'default'
    };
  };

  const onChange = (data: any) => {
    console.log('change', data);
  };

  const onPicked = (raw: any) => {
    console.log('onPicked', raw);
  };

  watch(
    () => pickerRef.value?.visible,
    async (v: boolean) => {
      console.log('change', v);
      await nextTick();
      setTimeout(() => {
        columns.value = columns2;
        asyncLoader.value = loader;
      }, 1000);
    }
  );
</script>

API

属性

属性名	说明	类型	默认值
columns	表格列配置	array	-
fields	查询条件表单字段	array	-
model	查询表单字段值	object	-
loader	表格数据加载器	function	-
modelValue	值	string | number | object | array	-
multiple	多选	boolean	-
raw	值为对象形式	boolean	-
disabled	禁用	boolean	-
append	多选追加模式	boolean	-
valueKey	值映射字段名称	string	value
labelKey	输入框显示映射字段名称	string	label
queryKey	查询参数名称	string	-
preload	单选模式，回车时自动检测取回有且计有唯一数据	boolean	-
dialogProps	弹窗组件配置参数	object	-
gridProps	表格组件配置参数	object	-
formProps	查询表单参数	object	-

接收 ElSelect 所有参数

事件

名称	说明	参数
change	值改变时触发	data
picked	选中数据是触发	raw