91 lines
2.2 KiB
Vue
91 lines
2.2 KiB
Vue
<template>
|
|
<div style="max-width: 260px">
|
|
<ele-table-select
|
|
ref="selectRef"
|
|
:multiple="false"
|
|
:allow-clear="true"
|
|
placeholder="请选择"
|
|
value-key="userId"
|
|
label-key="nickname"
|
|
v-model:value="selectedValue"
|
|
:table-config="tableConfig"
|
|
:overlay-style="{ width: '520px', maxWidth: '80%' }"
|
|
>
|
|
<!-- 表头工具栏 -->
|
|
<template #toolbar>
|
|
<user-advanced-search @search="search" />
|
|
</template>
|
|
</ele-table-select>
|
|
</div>
|
|
<!-- <div style="margin-top: 12px">
|
|
<a-button type="primary" @click="setInitValue">回显数据</a-button>
|
|
</div> -->
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive } from 'vue';
|
|
import { listUsers } from '@/api/system/user';
|
|
import UserAdvancedSearch from './user-advanced-search.vue';
|
|
import type { EleTableSelect } from 'ele-admin-pro/es';
|
|
import type { ProTableProps } from 'ele-admin-pro/es/ele-pro-table/types';
|
|
import type { WhereType } from '../types';
|
|
|
|
const selectedValue = defineModel();
|
|
|
|
// 选择框实例
|
|
const selectRef = ref<InstanceType<typeof EleTableSelect> | null>(null);
|
|
|
|
// 表格配置
|
|
const tableConfig = reactive<ProTableProps>({
|
|
datasource: ({ page, limit, where, orders }) => {
|
|
return listUsers({ ...where, ...orders, page, limit });
|
|
},
|
|
columns: [
|
|
{
|
|
title: '用户编号',
|
|
dataIndex: 'userId',
|
|
sorter: true,
|
|
showSorterTooltip: false
|
|
},
|
|
{
|
|
title: '用户名',
|
|
key: 'nickname',
|
|
dataIndex: 'nickname',
|
|
sorter: false,
|
|
showSorterTooltip: false
|
|
},
|
|
,
|
|
{
|
|
title: '手机号',
|
|
key: 'phone',
|
|
dataIndex: 'phone',
|
|
sorter: false,
|
|
showSorterTooltip: false
|
|
}
|
|
],
|
|
toolkit: ['reload', 'columns'],
|
|
pageSize: 5,
|
|
pageSizeOptions: ['5', '10', '15', '20'],
|
|
size: 'small',
|
|
rowSelection: {
|
|
columnWidth: 38,
|
|
preserveSelectedRowKeys: true,
|
|
fixed: 'left'
|
|
},
|
|
toolsTheme: 'default',
|
|
bordered: true,
|
|
toolStyle: {
|
|
padding: '0 8px'
|
|
},
|
|
scroll: { x: 480 }
|
|
});
|
|
|
|
// 搜索
|
|
const search = (where: WhereType) => {
|
|
selectRef.value?.reload({
|
|
where,
|
|
page: 1
|
|
});
|
|
};
|
|
</script>
|