feat(20240705_tableSelector): 表格选择组件
- 增加树形结构懒加载
This commit is contained in:
李小涛
@@ -1,203 +1,211 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-select popper-class="popperClass" class="tableSelector" :multiple="props.tableConfig.isMultiple"
|
<el-select
|
||||||
@remove-tag="removeTag" v-model="data" placeholder="请选择" @visible-change="visibleChange">
|
popper-class="popperClass"
|
||||||
<template #empty>
|
class="tableSelector"
|
||||||
<div class="option">
|
:multiple="props.tableConfig.isMultiple"
|
||||||
<el-input style="margin-bottom: 10px" v-model="search" clearable placeholder="请输入关键词" @change="getDict"
|
@remove-tag="removeTag"
|
||||||
@clear="getDict">
|
v-model="data"
|
||||||
<template #append>
|
placeholder="请选择"
|
||||||
<el-button type="primary" icon="Search"/>
|
@visible-change="visibleChange"
|
||||||
</template>
|
>
|
||||||
</el-input>
|
<template #empty>
|
||||||
<el-table
|
<div class="option">
|
||||||
ref="tableRef"
|
<el-input style="margin-bottom: 10px" v-model="search" clearable placeholder="请输入关键词" @change="getDict" @clear="getDict">
|
||||||
:data="tableData"
|
<template #append>
|
||||||
size="mini"
|
<el-button type="primary" icon="Search" />
|
||||||
border
|
</template>
|
||||||
row-key="id"
|
</el-input>
|
||||||
style="width: 400px"
|
<el-table
|
||||||
max-height="200"
|
ref="tableRef"
|
||||||
height="200"
|
:data="tableData"
|
||||||
:highlight-current-row="!props.tableConfig.isMultiple"
|
size="mini"
|
||||||
@selection-change="handleSelectionChange"
|
border
|
||||||
@current-change="handleCurrentChange"
|
row-key="id"
|
||||||
>
|
:lazy="props.tableConfig.lazy"
|
||||||
<el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55"/>
|
:load="props.tableConfig.load"
|
||||||
<el-table-column fixed type="index" label="#" width="50"/>
|
:tree-props="props.tableConfig.treeProps"
|
||||||
<el-table-column :prop="item.prop" :label="item.label" :width="item.width"
|
style="width: 400px"
|
||||||
v-for="(item,index) in props.tableConfig.columns" :key="index"/>
|
max-height="200"
|
||||||
</el-table>
|
height="200"
|
||||||
<el-pagination style="margin-top: 10px" background
|
:highlight-current-row="!props.tableConfig.isMultiple"
|
||||||
v-model:current-page="pageConfig.page"
|
@selection-change="handleSelectionChange"
|
||||||
v-model:page-size="pageConfig.limit"
|
@current-change="handleCurrentChange"
|
||||||
layout="prev, pager, next"
|
>
|
||||||
:total="pageConfig.total"
|
<el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55" />
|
||||||
@current-change="handlePageChange"
|
<el-table-column fixed type="index" label="#" width="50" />
|
||||||
/>
|
<el-table-column
|
||||||
</div>
|
:prop="item.prop"
|
||||||
</template>
|
:label="item.label"
|
||||||
</el-select>
|
:width="item.width"
|
||||||
|
v-for="(item, index) in props.tableConfig.columns"
|
||||||
|
:key="index"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
style="margin-top: 10px"
|
||||||
|
background
|
||||||
|
v-model:current-page="pageConfig.page"
|
||||||
|
v-model:page-size="pageConfig.limit"
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="pageConfig.total"
|
||||||
|
@current-change="handlePageChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-select>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {defineProps, onMounted, reactive, ref, toRaw, watch} from 'vue'
|
import { defineProps, reactive, ref, watch } from 'vue';
|
||||||
import {dict} from '@fast-crud/fast-crud'
|
import XEUtils from 'xe-utils';
|
||||||
import XEUtils from 'xe-utils'
|
import { request } from '/@/utils/service';
|
||||||
import {request} from '/@/utils/service'
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: {},
|
modelValue: {},
|
||||||
tableConfig: {
|
tableConfig: {
|
||||||
url: null,
|
url: null,
|
||||||
label: null, //显示值
|
label: null, //显示值
|
||||||
value: null, //数据值
|
value: null, //数据值
|
||||||
isTree: false,
|
isTree: false,
|
||||||
data: [],//默认数据
|
lazy: true,
|
||||||
isMultiple: false, //是否多选
|
load: () => {},
|
||||||
columns: [], //每一项对应的列表项
|
data: [], //默认数据
|
||||||
},
|
isMultiple: false, //是否多选
|
||||||
displayLabel: {}
|
treeProps: { children: 'children', hasChildren: 'hasChildren' },
|
||||||
} as any)
|
columns: [], //每一项对应的列表项
|
||||||
const emit = defineEmits(['update:modelValue'])
|
},
|
||||||
|
displayLabel: {},
|
||||||
|
} as any);
|
||||||
|
const emit = defineEmits(['update:modelValue']);
|
||||||
// tableRef
|
// tableRef
|
||||||
const tableRef = ref()
|
const tableRef = ref();
|
||||||
// template上使用data
|
// template上使用data
|
||||||
const data = ref()
|
const data = ref();
|
||||||
// 多选值
|
// 多选值
|
||||||
const multipleSelection = ref()
|
const multipleSelection = ref();
|
||||||
watch(multipleSelection, // 监听multipleSelection的变化，
|
|
||||||
(value) => {
|
|
||||||
const {tableConfig} = props
|
|
||||||
//是否多选
|
|
||||||
if (!tableConfig.isMultiple) {
|
|
||||||
data.value = value ? value[tableConfig.label] : null
|
|
||||||
} else {
|
|
||||||
|
|
||||||
const result = value ? value.map((item: any) => {
|
|
||||||
return item[tableConfig.label]
|
|
||||||
}) : null
|
|
||||||
data.value = result
|
|
||||||
}
|
|
||||||
}, // 当multipleSelection值触发后，同步修改data.value的值
|
|
||||||
{immediate: true} // 立即触发一次，给data赋值初始值
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
// 搜索值
|
// 搜索值
|
||||||
const search = ref(undefined)
|
const search = ref(undefined);
|
||||||
//表格数据
|
//表格数据
|
||||||
const tableData = ref()
|
const tableData = ref();
|
||||||
// 分页的配置
|
// 分页的配置
|
||||||
const pageConfig = reactive({
|
const pageConfig = reactive({
|
||||||
page: 1,
|
page: 1,
|
||||||
limit: 10,
|
limit: 10,
|
||||||
total: 0
|
total: 0,
|
||||||
})
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 表格多选
|
* 表格多选
|
||||||
* @param val:Array
|
* @param val:Array
|
||||||
*/
|
*/
|
||||||
const handleSelectionChange = (val: any) => {
|
const handleSelectionChange = (val: any) => {
|
||||||
multipleSelection.value = val
|
multipleSelection.value = val;
|
||||||
const {tableConfig} = props
|
const { tableConfig } = props;
|
||||||
const result = val.map((item: any) => {
|
const result = val.map((item: any) => {
|
||||||
return item[tableConfig.value]
|
return item[tableConfig.value];
|
||||||
})
|
});
|
||||||
emit('update:modelValue', result)
|
data.value = val.map((item: any) => {
|
||||||
}
|
return item[tableConfig.label];
|
||||||
|
});
|
||||||
|
|
||||||
|
emit('update:modelValue', result);
|
||||||
|
};
|
||||||
/**
|
/**
|
||||||
* 表格单选
|
* 表格单选
|
||||||
* @param val:Object
|
* @param val:Object
|
||||||
*/
|
*/
|
||||||
const handleCurrentChange = (val: any) => {
|
const handleCurrentChange = (val: any) => {
|
||||||
multipleSelection.value = val
|
const { tableConfig } = props;
|
||||||
const {tableConfig} = props
|
if (!tableConfig.isMultiple && val) {
|
||||||
emit('update:modelValue', val[tableConfig.value])
|
data.value = val[tableConfig.label];
|
||||||
}
|
emit('update:modelValue', val[tableConfig.value]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取字典值
|
* 获取字典值
|
||||||
*/
|
*/
|
||||||
const getDict = async () => {
|
const getDict = async () => {
|
||||||
const url = props.tableConfig.url
|
const url = props.tableConfig.url;
|
||||||
const params = {
|
const params = {
|
||||||
page: pageConfig.page,
|
page: pageConfig.page,
|
||||||
limit: pageConfig.limit,
|
limit: pageConfig.limit,
|
||||||
search: search.value
|
search: search.value,
|
||||||
}
|
};
|
||||||
const {data, page, limit, total} = await request({
|
const { data, page, limit, total } = await request({
|
||||||
url:url,
|
url: url,
|
||||||
params:params
|
params: params,
|
||||||
})
|
});
|
||||||
pageConfig.page = page
|
pageConfig.page = page;
|
||||||
pageConfig.limit = limit
|
pageConfig.limit = limit;
|
||||||
pageConfig.total = total
|
pageConfig.total = total;
|
||||||
if (props.tableConfig.data === undefined || props.tableConfig.data.length === 0) {
|
if (props.tableConfig.data === undefined || props.tableConfig.data.length === 0) {
|
||||||
if (props.tableConfig.isTree) {
|
if (props.tableConfig.isTree) {
|
||||||
tableData.value = XEUtils.toArrayTree(data, {parentKey: 'parent', key: 'id', children: 'children'})
|
tableData.value = XEUtils.toArrayTree(data, { parentKey: 'parent', key: 'id', children: 'children' });
|
||||||
} else {
|
} else {
|
||||||
tableData.value = data
|
tableData.value = data;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
tableData.value = props.tableConfig.data
|
tableData.value = props.tableConfig.data;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 下拉框展开/关闭
|
* 下拉框展开/关闭
|
||||||
* @param bool
|
* @param bool
|
||||||
*/
|
*/
|
||||||
const visibleChange = (bool: any) => {
|
const visibleChange = (bool: any) => {
|
||||||
if (bool) {
|
if (bool) {
|
||||||
getDict()
|
getDict();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 分页
|
* 分页
|
||||||
* @param page
|
* @param page
|
||||||
*/
|
*/
|
||||||
const handlePageChange = (page: any) => {
|
const handlePageChange = (page: any) => {
|
||||||
pageConfig.page = page
|
pageConfig.page = page;
|
||||||
getDict()
|
getDict();
|
||||||
}
|
};
|
||||||
|
|
||||||
// 监听displayLabel的变化，更新数据
|
// 监听displayLabel的变化，更新数据
|
||||||
watch(() => {
|
watch(
|
||||||
return props.displayLabel
|
() => {
|
||||||
}, (value) => {
|
return props.displayLabel;
|
||||||
const {tableConfig} = props
|
},
|
||||||
const result = value ? value.map((item: any) => {
|
(value) => {
|
||||||
return item[tableConfig.label]
|
const { tableConfig } = props;
|
||||||
}) : null
|
const result = value
|
||||||
data.value = result
|
? value.map((item: any) => { return item[tableConfig.label];})
|
||||||
}, {immediate: true})
|
: null;
|
||||||
|
data.value = result;
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.option {
|
.option {
|
||||||
height: auto;
|
height: auto;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.popperClass {
|
.popperClass {
|
||||||
height: 320px;
|
height: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select-dropdown__wrap {
|
.el-select-dropdown__wrap {
|
||||||
max-height: 310px !important;
|
max-height: 310px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableSelector {
|
.tableSelector {
|
||||||
.el-icon, .el-tag__close {
|
.el-icon,
|
||||||
display: none;
|
.el-tag__close {
|
||||||
}
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user