@sandload/fm-multi-picker
v1.0.30
Published
前端多选组件拓展,类传统穿梭框组件
Downloads
8
Readme
FmMultiPicker
前端多选组件拓展,类传统穿梭框组件
本插件依赖沙漏前端 sdk, 目前仅在万象内测试过
使用方式
<fm-multi-picker
class="fm-multi-picker"
:invoke-search-options="invokeSearchOptions"
:config="multiPickerConfig"
@change="handleMultiPickerChange"
@left-page-change="doSearch"
>
<template #header="scope">
<div class="fm-mb-1">
<a-space>
<a-input v-model="searchForm.keywords"></a-input>
<a-select
v-model="searchForm.type"
style="width:200px"
class="fm-mr-10px"
placeholder="商品类型"
>
<a-select-option :key="1" :value="1">AAA</a-select-option>
</a-select>
<a-button type="default" @click="doSearch(scope)">搜索</a-button>
</a-space>
</div>
</template>
<template #left>
<fm-multi-picker-row field="customerCode" title="编号" v-slot="{ row }" sortable>
{{ row.customerCode }}
</fm-multi-picker-row>
<fm-multi-picker-row field="name" title="名称"> </fm-multi-picker-row>
<fm-multi-picker-row field="price" title="价格" v-slot="{ row }" width="80" sortable>
¥{{ row.price | f2y }}
</fm-multi-picker-row>
</template>
<template #right>
<fm-multi-picker-row field="customerCode" title="编号" v-slot="{ row }" sortable>
{{ row.customerCode }}
</fm-multi-picker-row>
<fm-multi-picker-row
field="name"
title="名称"
:filters="[{ data: '' }]"
:filter-method="filterAgeMethod"
>
<template v-slot:filter="{ $panel, column }">
<template v-for="(option, index) in column.filters">
<input
class="my-input"
type="type"
:key="index"
v-model="option.data"
@input="$panel.changeOption($event, !!option.data, option)"
@keyup.enter="$panel.confirmFilter()"
placeholder="按回车确认筛选"
/>
</template>
</template>
</fm-multi-picker-row>
<fm-multi-picker-row field="price" title="价格" v-slot="{ row }" width="80" sortable>
¥{{ row.price | f2y }}
</fm-multi-picker-row>
</template>
<template #empty>
<a-empty description="暂无数据" image=""></a-empty>
</template>
</fm-multi-picker>
export default {
}