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