tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ 表格新增列设置控制

Browse Source
This commit is contained in:
hxr
2024-05-12 00:47:01 +08:00
parent 8258fec04b
commit 7e2b207afc
1 changed files with 151 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/components/PageContent/index.vue
View File

@@ -1,76 +1,107 @@
<template> <template>
<el-card shadow="never" class="table-container"> <el-card shadow="never" class="table-container">
<template #header> <div class="flex-x-between mb-[10px]">
<!-- 表格左上方工具栏 --> <div>
<template v-for="item in contentConfig.toolbar" :key="item"> <!-- 表格左上方工具栏 -->
<template v-if="typeof item === 'string'"> <template v-for="item in contentConfig.toolbar" :key="item">
<!-- 刷新 --> <template v-if="typeof item === 'string'">
<template v-if="item === 'refresh'"> <!-- 新增 -->
<el-button <template v-if="item === 'add'">
type="info" <el-button
icon="refresh" v-hasPerm="[`${contentConfig.pageName}:${item}`]"
@click="handleToolbar(item)" type="success"
/> icon="plus"
@click="handleToolbar(item)"
>
新增
</el-button>
</template>
<!-- 删除 -->
<template v-else-if="item === 'delete'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="danger"
icon="delete"
:disabled="removeIds.length === 0"
@click="handleToolbar(item)"
>
删除
</el-button>
</template>
<!-- 导出 -->
<template v-else-if="item === 'export'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="primary"
icon="download"
@click="handleToolbar(item)"
>
导出
</el-button>
</template>
</template> </template>
<!-- 新增 --> <!-- 其他 -->
<template v-else-if="item === 'add'"> <template v-else-if="typeof item === 'object'">
<el-button <template v-if="item.auth">
v-hasPerm="[`${contentConfig.pageName}:${item}`]" <el-button
type="success" v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
icon="plus" :icon="item.icon"
@click="handleToolbar(item)" type="default"
> @click="handleToolbar(item.name)"
新增 >
</el-button> {{ item.text }}
</template> </el-button>
<!-- 删除 --> </template>
<template v-else-if="item === 'delete'"> <template v-else>
<el-button <el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]" :icon="item.icon"
type="danger" type="default"
icon="delete" @click="handleToolbar(item.name)"
:disabled="removeIds.length === 0" >
@click="handleToolbar(item)" {{ item.text }}
> </el-button>
删除 </template>
</el-button>
</template>
<!-- 导出 -->
<template v-else-if="item === 'export'">
<el-button
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
type="primary"
icon="download"
@click="handleToolbar(item)"
>
导出
</el-button>
</template> </template>
</template> </template>
<!-- 其他 --> </div>
<template v-else-if="typeof item === 'object'">
<template v-if="item.auth"> <!-- 表格右上方工具栏 -->
<el-button <div>
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" <el-icon class="cursor-pointer" @click="handleToolbar('refresh')">
:icon="item.icon" <i-ep-refresh />
type="default" </el-icon>
@click="handleToolbar(item.name)"
> <!-- 列设置 -->
{{ item.text }} <el-popover placement="bottom" trigger="click">
</el-button> <template #reference>
<el-icon class="cursor-pointer ml-2">
<i-ep-setting />
</el-icon>
</template> </template>
<template v-else>
<el-button <el-checkbox
:icon="item.icon" v-model="columnSetting.checkAll"
type="default" :indeterminate="columnSetting.isIndeterminate"
@click="handleToolbar(item.name)" @change="handleCheckAllChange"
> >
{{ item.text }} 全选
</el-button> </el-checkbox>
</template>
</template> <el-checkbox-group
</template> v-model="columnSetting.checkedCols"
</template> @change="handleCheckedColumnsChange"
>
<div v-for="col in contentConfig.cols" :key="col.label">
<el-checkbox
v-if="col.label"
:value="col.label"
:label="col.label"
/>
</div>
</el-checkbox-group>
</el-popover>
</div>
</div>
<!-- 列表 --> <!-- 列表 -->
<el-table <el-table
v-loading="loading" v-loading="loading"
@@ -78,9 +109,9 @@
:data="pageData" :data="pageData"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<template v-for="col in contentConfig.cols" :key="col.prop"> <template v-for="col in displayedColumns" :key="col.prop">
<!-- 显示图片 --> <!-- 显示图片 -->
<template v-if="col.templet === 'image'"> <template v-if="col.show && col.templet === 'image'">
<el-table-column v-bind="col"> <el-table-column v-bind="col">
<template #default="scope"> <template #default="scope">
<template v-if="Array.isArray(scope.row[col.prop])"> <template v-if="Array.isArray(scope.row[col.prop])">
@@ -109,7 +140,7 @@
</el-table-column> </el-table-column>
</template> </template>
<!-- 列操作栏 --> <!-- 列操作栏 -->
<template v-else-if="col.templet === 'tool'"> <template v-else-if="col.show && col.templet === 'tool'">
<el-table-column v-bind="col"> <el-table-column v-bind="col">
<template #default="scope"> <template #default="scope">
<template v-for="item in col.operat" :key="item"> <template v-for="item in col.operat" :key="item">
@@ -180,7 +211,7 @@
</el-table-column> </el-table-column>
</template> </template>
<!-- 自定义 --> <!-- 自定义 -->
<template v-else-if="col.templet === 'custom'"> <template v-else-if="col.show && col.templet === 'custom'">
<el-table-column v-bind="col"> <el-table-column v-bind="col">
<template #default="scope"> <template #default="scope">
<slot <slot
@@ -193,7 +224,7 @@
</template> </template>
<!-- 其他 --> <!-- 其他 -->
<template v-else> <template v-else>
<el-table-column v-bind="col" /> <el-table-column v-bind="col" v-if="col.show" />
</template> </template>
</template> </template>
</el-table> </el-table>
@@ -211,7 +242,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
import Pagination from "@/components/Pagination/index.vue"; import Pagination from "@/components/Pagination/index.vue";
import type { TableProps } from "element-plus"; import type { TableProps, CheckboxValueType } from "element-plus";
// 对象类型 // 对象类型
export type IObject = Record<string, any>; export type IObject = Record<string, any>;
@@ -398,6 +429,53 @@ function exportPageData(queryParams: IObject = {}) {
ElMessage.error("未配置exportAction"); ElMessage.error("未配置exportAction");
} }
} }
// 列设置类型声明
interface IColumnSetting {
checkAll: boolean;
isIndeterminate: boolean;
checkedCols: string[];
}
// 列设置
const columnSetting = ref<IColumnSetting>({
checkAll: true,
isIndeterminate: false,
checkedCols: [],
});
// 创建一个响应式副本，用于存储最后显示的列配置
const displayedColumns = ref<IObject>(props.contentConfig.cols);
// 全选/取消全选
const handleCheckAllChange = (checkAll: CheckboxValueType) => {
columnSetting.value.checkedCols = checkAll
? props.contentConfig.cols.map((col) => col.label)
: [];
columnSetting.value.isIndeterminate = false;
displayedColumns.value = displayedColumns.value.map((col: IObject) => ({
...col,
show: checkAll,
}));
};
// 选中列变化
const handleCheckedColumnsChange = (values: CheckboxValueType[]) => {
const showColumnsLength = props.contentConfig.cols.length;
const checkedCount = values.length;
columnSetting.value.checkAll = checkedCount === showColumnsLength;
columnSetting.value.isIndeterminate =
checkedCount > 0 && checkedCount < showColumnsLength;
displayedColumns.value = displayedColumns.value.map((col: IObject) => ({
...col,
show: values.includes(col.label),
}));
};
// 初始化全选状态
handleCheckAllChange(columnSetting.value.checkAll);
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>