<template>
|
<!-- 表格 -->
|
<div class="the-a-table" :class="currentThemeMode === 'dark' ? 'a-table-dark' : ''">
|
<div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
|
<div class="table-select" v-if="colOpenShow">
|
<div class="select-box">
|
<icon-list class="box-icon" @click="checkcol" :size="24" />
|
<a-scrollbar
|
class="box-scrollbar"
|
type="track"
|
style="height: 200px; overflow: auto"
|
v-show="iscolopen"
|
>
|
<a-space class="box-post" direction="vertical" size="large">
|
<a-checkbox-group direction="vertical" @change="selCeckBoxList" v-model="checkedValue">
|
<a-checkbox v-for="(item, index) in columns" :value="item.title" :key="index">
|
{{ item.title }}
|
</a-checkbox>
|
</a-checkbox-group>
|
</a-space>
|
</a-scrollbar>
|
</div>
|
</div>
|
<a-space direction="vertical" size="large" fill>
|
<a-table
|
row-key="id"
|
:loading="loading"
|
:pagination="pagination"
|
:data="data"
|
:columns="tableColumns"
|
:bordered="bordered"
|
:size="size"
|
@page-change="onPageChange"
|
:max-height="documentHeight"
|
:scroll="{ x: 1000 }"
|
:row-selection="rowSelection"
|
@select-all="selectTabAll"
|
@selection-change="selectTabChange"
|
>
|
<!-- <template #columns>
|
<a-table-column
|
v-for="(list, index) in columns"
|
:key="list.key"
|
:title="list.title"
|
:dataIndex="list.dataIndex"
|
>
|
</a-table-column>
|
</template> -->
|
<template v-for="(item, key, i) in slots" :key="i" v-slot:[key]="{ record, rowIndex, column }">
|
<slot :name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"></slot>
|
</template>
|
</a-table>
|
</a-space>
|
|
<!-- <a-select v-model="selectedColumns" mode="multiple" :options="allColumns" @change="handleColumnsChange" /> -->
|
</div>
|
</template>
|
<script lang="ts" setup name="TheIconCard">
|
import { useTheme } from "@/hooks/useTheme";
|
import { Svg } from "@easyfe/admin-component";
|
import { useSlots } from "vue";
|
|
const slots = useSlots();
|
|
const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();
|
|
const props = withDefaults(
|
defineProps<{
|
columns?: Array<any>;
|
data?: Array<any>;
|
colOpenShow?: boolean;
|
loading?: boolean;
|
pagination?: boolean;
|
checkedValue?: Array<any>;
|
bordered?: boolean;
|
showSelection?: boolean;
|
}>(),
|
{
|
columns: () => [], //表头
|
data: () => [], //数据
|
colOpenShow: true, // 配置列表 表头
|
loading: false,
|
pagination: false,
|
checkedValue: () => [],
|
bordered: true,
|
showSelection: false
|
}
|
);
|
|
const emits = defineEmits<{
|
(e: "selTableCol", data: object): void;
|
}>();
|
|
const iscolopen = ref(false);
|
const checkedAll = ref(false);
|
const checkedArr = ref([]);
|
const checkedValue = computed(() => props.checkedValue);
|
const tableColumns = computed(() => {
|
return props.columns.filter((item) => {
|
return checkedValue.value.includes(item.title);
|
});
|
});
|
const data = computed(() => props.data);
|
const loading = computed(() => props.loading);
|
// const pagination = computed(() => props.pagination);
|
|
const checkcol = () => {
|
iscolopen.value = !iscolopen.value;
|
};
|
const onMaskClick = () => {
|
iscolopen.value = false;
|
};
|
|
const showSelection = computed(() => props.showSelection);
|
|
const rowSelection = showSelection.value
|
? {
|
type: "checkbox",
|
showCheckedAll: true,
|
onlyCurrent: false
|
|
// onChange: (selectedRowKeys: any, selectedRows: any) => {}
|
}
|
: "";
|
|
//下拉选择
|
const selCeckBoxList = (val: any) => {
|
console.log(val);
|
emits("selTableCol", val);
|
};
|
|
const selectTabAll = (val: any) => {
|
console.log(val, "全选");
|
checkedAll.value = val;
|
};
|
const selectTabChange = (val: any) => {
|
console.log(val, "单选");
|
checkedArr.value = val;
|
};
|
</script>
|
<style lang="scss" scoped>
|
.a-table-dark {
|
}
|
|
.table-select {
|
display: flex;
|
justify-content: flex-end;
|
// margin-bottom: 10px;
|
cursor: pointer;
|
.select-box {
|
position: relative;
|
.box-post {
|
// position: absolute;
|
// top: 20px;
|
// right: 0px;
|
// z-index: 1;
|
padding: 10px;
|
width: 180px;
|
// height: 200px;
|
// background-color: var(--color-bg-3);
|
// border-radius: 4px;
|
}
|
:deep(.box-scrollbar) {
|
position: absolute !important;
|
background-color: var(--color-bg-3) !important;
|
right: 0px;
|
z-index: 100;
|
}
|
}
|
}
|
</style>
|
