<!-- 📚📚📚 Pro-Table 文档: https://juejin
.cn/post/7166068828202336263 -->
<template>
<!-- 查询表单 -->
<SearchForm
v-show="isShowSearch"
:search="_search"
:reset="_reset"
:columns="searchColumns"
:search-param="searchParam"
:search-col="searchCol"
/>
<!-- 表格主体 -->
<div class="card table-main">
<!-- 表格头部 操作按钮 -->
<div class="table-header">
<div class="header-button-lf">
<slot name="tableHeader" :selected-list="selectedList" :selected-list-
ids="selectedList
Ids" :is-selected="isSelected" />
</div>
<div v-
if="toolButton" class="header-button-ri">
<slot name="toolButton">
<el-button v-
if="showToolButton
('refresh'
)" :icon="Refresh" circle @click="refreshData" />
<el-button v-
if="showToolButton
('setting'
) && columns
.length" :icon="Operation" circle @click="openColSetting" />
<el-button
v-
if="showToolButton
('search'
) && searchColumns
?.length"
:icon="Search"
circle
@click="isShowSearch = !isShowSearch"
/>
</slot>
</div>
</div>
<!-- 表格上方的提示信息 -->
<div v-
if="tableTipsFlag">
<slot name="tableTips"></slot>
</div>
<!-- 表格主体 -->
<el-table ref="tableRef" v-bind="$attrs" :data="processTableData" :border="border" :row-key="rowKey"
@selection-change="selectionChange" @cell-dblclick="tableCellDblClick" @row-dblclick="tableRowDblclick">
<!-- 默认插槽 -->
<slot />
<template v-for="item in tableColumns" :key="item">
<!-- selection || radio || index || expand || sort -->
<el-table-column v-
if="item
.type && columnTypes
.includes
(item
.type
)" v-bind="item"
:align="item
.align
?? 'center'" :reserve-selection="item
.type == 'selection'" :selectable="item
.isSelectable">
<template #default="scope">
<!-- expand -->
<template v-
if="item
.type == 'expand'">
<component :is="item
.render" v-bind="scope" v-
if="item
.render" />
<slot v-else :name="item
.type" v-bind="scope" />
</template>
<!-- radio -->
<el-radio v-
if="item
.type == 'radio'" v-model="radio" :label="scope
.row[rowKey]">
<!-- <i></i> -->
</el-radio>
<!-- sort -->
<el-tag v-
if="item
.type == 'sort'" class="move">
<el-icon> <DCaret /></el-icon>
</el-tag>
</template>
</el-table-column>
<!-- other -->
<TableColumn v-
if="!item
.type && item
.prop && item
.isShow && getTableColumnSetting
(item
.prop, props
.tableName
)"
:column="item">
<template v-for="slot in Object
.keys
($slots
)" #[slot]="scope">
<slot :name="slot" v-bind="scope" />
</template>
</TableColumn>
</template>
<!-- 插入表格最后一行之后的插槽 -->
<template #append>
<slot name="append" />
</template>
<!-- 无数据 -->
<template #empty>
<div class="table-empty">
<slot name="empty">
<img src="@/assets/images/notData
.png" alt="notData" />
<div>暂无数据</div>
</slot>
</div>
</template>
</el-table>
<!-- 分页组件 -->
<slot name="pagination">
<Pagination
v-
if="pagination"
:pageable="pageable"
:handle-size-change="handleSizeChange"
:handle-current-change="handleCurrentChange"
/>
</slot>
</div>
<!-- 列设置 -->
<ColSetting v-
if="toolButton" ref="colRef" v-model:col-setting="colSetting" v-model:tableName="props
.tableName" />
</template>
<script setup lang="ts" name="ProTable">
import { ref, watch, prov
ide, onMounted, unref, computed, reactive } from "vue";
import { ElTable } from "element-plus";
import { useTable } from "@/hooks/useTable";
import { useSelection } from "@/hooks/useSelection";
import { BreakPoint } from "@/components/Gr
id/interface";
import { ColumnProps, TypeProps } from "@/components/ProTable/interface";
import { Refresh, Operation, Search } from "@element-plus/icons-vue";
import { handleProp } from "@/utils";
import SearchForm from "@/components/SearchForm/index
.vue";
import Pagination from "
./components/Pagination
.vue";
import ColSetting from "
./components/ColSetting
.vue";
import TableColumn from "
./components/TableColumn
.vue";
import Sortable from "sortablejs";
import { useUserStore } from "@/stores/modules/user";
import { getTableColumnSetting, getColSetting } from "@/utils/columnSetting";
const userStore = useUserStore
();
const username = computed
(() => userStore
.userInfo
.realname
);
export interface ProTableProps {
columns: ColumnProps[]; // 列配置项 ==> 必传
data
?: any[]; // 静态 table data 数据，若存在则不会使用
requestApi 返回的 data ==> 非必传
requestApi
?:
(params: any
) => Promise<any>; // 请求表格数据的 api ==> 非必传
requestAuto
?: boolean; //
是否自动执行请求 api ==> 非必传（默认为true）
requestError
?:
(params: any
) => vo
id; // 表格 api 请求错误监听 ==> 非必传
dataCallback
?:
(data: any
) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
title
?: string; // 表格标题 ==> 非必传
pagination
?: boolean; //
是否需要分页组件 ==> 非必传（默认为true）
initParam
?: any; // 初始化请求参数 ==> 非必传（默认为{}）
border
?: boolean; //
是否带有纵向边框 ==> 非必传（默认为true）
toolButton
?:
("refresh" | "setting" | "search"
)[] | boolean; //
是否显示表格功能按钮 ==> 非必传（默认为true）
rowKey
?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的
id ==> 非必传（默认为
id）
searchCol
?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
tableTipsFlag
?: boolean; // 表格上方的提示信息 ==> 非必传 （默认为false）
tableName
?: string; // 表格名称，具唯一性，保存表格列设置用 非必传，不传则不保存列设置
}
// 接受父组件参数，配置默认值
const props = withDefaults
(defineProps<ProTableProps>
(), {
columns:
() => [],
requestAuto: true,
pagination: true,
initParam: {},
border: true,
toolButton: true,
rowKey: "
id",
searchCol:
() =>
({ xs: 1, sm: 3, md: 3, lg: 4, xl: 5 }
),
tableTipsFlag: false
}
);
// table 实例
const tableRef = ref<InstanceType<typeof ElTable>>
();
// column 列类型
const columnTypes: TypeProps[] = ["selection", "radio", "index", "expand", "sort"];
//
是否显示搜索模块
const isShowSearch = ref
(true
);
// 控制 ToolButton 显示
const showToolButton =
(key: "refresh" | "setting" | "search"
) => {
return Array
.isArray
(props
.toolButton
) ? props
.toolButton
.includes
(key
) : props
.toolButton;
};
// 单选值
const radio = ref
(""
);
// 表格多选 Hooks
const { selectionChange, selectedList, selectedList
Ids, isSelected } = useSelection
(props
.rowKey
);
// 表格操作 Hooks
const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
useTable
(props
.requestApi, props
.initParam, props
.pagination, props
.dataCallback, props
.requestError, tableRef
);
// 清
空选中数据列表
const clearSelection =
() => tableRef
.value!
.clearSelection
();
const toggleRowSelection =
(row, flag
?: boolean
) => tableRef
.value!
.toggleRowSelection
(row, flag
);
// 处理表格数据
const processTableData = computed
(() => {
if (!props
.data
) return tableData
.value;
if (!props
.pagination
) return props
.data;
return props
.data
.slice
(
(pageable
.value
.pageNum - 1
) * pageable
.value
.pageSize,
pageable
.value
.pageSize * pageable
.value
.pageNum
);
}
);
// 监听页面 initParam 改化，重新
获取表格数据
watch
(() => props
.initParam,
() => {
// 将初始化initParam参数赋值给表单
searchParam
.value = {
...searchParam
.value,
...props
.initParam,
};
getTableList
()
}, { deep: true }
);
// 接收 columns 并设置为响应式
const tableColumns = reactive<ColumnProps[]>
(props
.columns
);
// 扁平化 columns
const flatColumns = computed
(() => flatColumnsFunc
(tableColumns
));
// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
const enumMap = ref
(new Map<string, { [key: string]: any }[]>
());
const setEnumMap = async
({ prop, enum: enumValue }: ColumnProps
) => {
if (!enumValue
) return;
// 如果当前 enumMap 存在相同的值 return
if (enumMap
.value
.has
(prop!
) &&
(typeof enumValue === "function" || enumMap
.value
.get
(prop!
) === enumValue
)) return;
// 当前 enum 为静态数据，则直接存储到 enumMap
if (typeof enumValue
!== "function"
) return enumMap
.value
.set
(prop!, unref
(enumValue!
));
// 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
enumMap
.value
.set
(prop!, []
);
// 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
const { data } = await enumValue
();
enumMap
.value
.set
(prop!, data
);
};
const refreshData =
() => {
pageable
.value
.pageNum = 1;
getTableList
();
};
// 注入 enumMap
prov
ide
("enumMap", enumMap
);
// 扁平化 columns 的方法
const flatColumnsFunc =
(columns: ColumnProps[], flatArr: ColumnProps[] = []
) => {
columns
.forEach
(async col => {
if (col
._children
?.length
) flatArr
.push
(...flatColumnsFunc
(col
._children
));
flatArr
.push
(col
);
// column 添加默认 isShow && isFilterEnum 属性值
col
.isShow = col
.isShow
?? true;
col
.isFilterEnum = col
.isFilterEnum
?? true;
// 设置 enumMap
await setEnumMap
(col
);
}
);
return flatArr
.filter
(item => !item
._children
?.length
);
};
// 过滤需要搜索的配置项 && 排序
const searchColumns = computed
(() => {
return flatColumns
.value
?.filter
(item => item
.search
?.el || item
.search
?.render
)
.sort
((a, b
) => a
.search!
.order! - b
.search!
.order!
);
}
);
// 设置 搜索表单默认排序 && 搜索表单项的默认值
searchColumns
.value
?.forEach
((column, index
) => {
column
.search!
.order = column
.search
?.order
?? index + 2;
const key = column
.search
?.key
?? handleProp
(column
.prop!
);
const defaultValue = column
.search
?.defaultValue;
if (defaultValue
!== undefined && defaultValue
!==
null) {
searchInitParam
.value[key] = defaultValue;
searchParam
.value[key] = defaultValue;
}
}
);
// 列设置 ==> 需要过滤掉不需要设置的列
const colRef = ref
();
const colSetting = getColSetting
(tableColumns, props
.tableName
);
const openColSetting =
() => colRef
.value
.openColSetting
();
// 定义 emit 事件
const emit = defineEmits<{
search: [];
reset: [];
dargSort: [{ newIndex
?: number; oldIndex
?: number }];
tableCellDblClick: [{ row: any, column: any, cell: any, event: any }];
tableRowDblclick: [{ row: any, column: any, event: any }];
}>
();
const _search =
() => {
search
();
emit
("search"
);
};
const _reset =
() => {
reset
();
emit
("reset"
);
};
// 拖拽排序
const dragSort =
() => {
const tbody = document
.querySelector
("
.el-table__body-wrapper tbody"
) as HTMLElement;
Sortable
.create
(tbody, {
handle: "
.move",
animation: 300,
onEnd
({ newIndex, oldIndex }
) {
const [removedItem] = processTableData
.value
.splice
(oldIndex!, 1
);
processTableData
.value
.splice
(newIndex!, 0, removedItem
);
emit
("dargSort", { newIndex, oldIndex }
);
}
}
);
};
// 表格单元格双击事件
const tableCellDblClick =
(row, column, cell, event
) => {
emit
("tableCellDblClick", { row, column, cell, event }
);
}
// 表格行双击事件
const tableRowDblclick =
(row, column, event
) => {
emit
("tableRowDblclick", { row, column, event }
);
}
// 初始化表格数据 && 拖拽排序
onMounted
(() => {
dragSort
();
props
.requestAuto && getTableList
();
props
.data &&
(pageable
.value
.total = props
.data
.length
);
}
);
// 暴露给父组件的参数和方法
(外部需要什么，都可以从这里暴露出去
)
defineExpose
({
element: tableRef,
tableData: processTableData,
radio,
pageable,
searchParam,
searchInitParam,
getTableList,
search,
reset,
handleSizeChange,
handleCurrentChange,
clearSelection,
toggleRowSelection,
enumMap,
isSelected,
selectedList,
selectedList
Ids,
refreshData: getTableList // 暴露刷新方法
}
);
</script>
<template>
<div v-
if="columns
.length" class="card table-search">
<el-form ref="formRef" :model="searchParam">
<Gr
id ref="gr
idRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
<Gr
idItem v-for="
(item, index
) in columns" :key="item
.prop" v-bind="getResponsive
(item
)" :index="index">
<el-form-item>
<template #label>
<el-space :size="4">
<span>{{ `${item
.search
?.label
?? item
.label}` }}</span>
<el-tooltip v-
if="item
.search
?.tooltip" effect="dark" :content="item
.search
?.tooltip" placement="top">
<i :class="'iconfont icon-yiwen'"></i>
</el-tooltip>
</el-space>
</template>
<SearchFormItem :column="item" :search-param="searchParam" />
</el-form-item>
</Gr
idItem>
<Gr
idItem suffix>
<div class="operation">
<el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
<el-button :icon="Delete" @click="reset"> 重置 </el-button>
<el-button v-
if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
{{ collapsed
? "展开" : "合并" }}
<el-icon class="el-icon--right">
<component :is="collapsed
? ArrowDown : ArrowUp"></component>
</el-icon>
</el-button>
</div>
</Gr
idItem>
</Gr
id>
</el-form>
</div>
</template>
<script setup lang="ts" name="SearchForm">
import { computed, ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { BreakPoint } from "@/components/Gr
id/interface";
import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import SearchFormItem from "
./components/SearchFormItem
.vue";
import Gr
id from "@/components/Gr
id/index
.vue";
import Gr
idItem from "@/components/Gr
id/components/Gr
idItem
.vue";
interface ProTableProps {
columns
?: ColumnProps[]; // 搜索配置列
searchParam
?: { [key: string]: any }; // 搜索参数
searchCol: number | Record<BreakPoint, number>;
search:
(params: any
) => vo
id; // 搜索方法
reset:
(params: any
) => vo
id; // 重置方法
}
// 默认值
const props = withDefaults
(defineProps<ProTableProps>
(), {
columns:
() => [],
searchParam:
() =>
({}
)
}
);
//
获取响应式设置
const getResponsive =
(item: ColumnProps
) => {
return {
span: item
.search
?.span,
offset: item
.search
?.offset
?? 0,
xs: item
.search
?.xs,
sm: item
.search
?.sm,
md: item
.search
?.md,
lg: item
.search
?.lg,
xl: item
.search
?.xl
};
};
//
是否默认折叠搜索项
const collapsed = ref
(true
);
//
获取响应式断点
const gr
idRef = ref
();
const breakPoint = computed<BreakPoint>
(() => gr
idRef
.value
?.breakPoint
);
//
判断是否显示 展开/合并 按钮
const showCollapse = computed
(() => {
let show = false;
props
.columns
.reduce
((prev, current
) => {
prev +=
(current
.search![breakPoint
.value]
?.span
?? current
.search
?.span
?? 1
) +
(current
.search![breakPoint
.value]
?.offset
?? current
.search
?.offset
?? 0
);
if (typeof props
.searchCol
!== "number"
) {
if (prev >= props
.searchCol[breakPoint
.value]
) show = true;
} else {
if (prev >= props
.searchCol
) show = true;
}
return prev;
}, 0
);
return show;
}
);
</script>
<template>
<!-- 特殊处理有效天数的自定义搜索框 -->
<template v-
if="column
.prop === 'val
idityPeriod' && column
.search
?.el === 'custom'">
<div class="val
idity-period-container" style="w
idth: 300px;">
<el-input
v-model="_searchParam[column
.search
?.key
?? handleProp
(column
.prop!
)]
.start"
placeholder="请输入"
:clearable="clearable"
style="w
idth: 150px; margin-right: 8px;"
/>
<span style="margin-right: 8px;">至</span>
<el-input
v-model="_searchParam[column
.search
?.key
?? handleProp
(column
.prop!
)]
.end"
placeholder="请输入"
:clearable="clearable"
:disabled="unlimited"
style="w
idth: 150px; margin-right: 16px;"
/>
<el-checkbox
v-model="_searchParam[column
.search
?.key
?? handleProp
(column
.prop!
)]
.unlimited"
label="无期限"
/>
</div>
</template>
<!-- 原有默认渲染逻辑 -->
<template v-else>
<component
:is="column
.search
?.render
?? `el-${column
.search
?.el}`"
v-bind="{
...handleSearchProps,
...placeholder, searchParam: _searchParam, clearable }"
v-model="_searchParam[column
.search
?.key
?? handleProp
(column
.prop!
)]"
:data="column
.search
?.el === 'tree-select'
? columnEnum : []"
collapse-tags
:options="['cascader', 'select-v2']
.includes
(column
.search
?.el!
) ? columnEnum : []"
:filterable="true"
>
<template v-
if="column
.search
?.el === 'cascader'" #default="{ data }">
<span>{{ data[fieldNames
.label] }}</span>
</template>
<template v-
if="column
.search
?.el === 'select'">
<component
:is="`el-option`"
v-for="
(col, index
) in columnEnum"
:key="index"
:label="col[fieldNames
.label]"
:value="col[fieldNames
.value]"
:title="col[fieldNames
.label]"
></component>
</template>
<slot v-else></slot>
</component>
</template>
</template>
<script setup lang="ts" name="SearchFormItem">
import { computed, inject, ref, onMounted } from "vue";
import { handleProp } from "@/utils";
import { ColumnProps } from "@/components/ProTable/interface";
interface SearchFormItem {
column: ColumnProps;
searchParam: { [key: string]: any };
}
const props = defineProps<SearchFormItem>
();
// 接收搜索参数
const _searchParam = computed
(() => props
.searchParam
);
// 初始化有效天数的搜索参数结构
onMounted
(() => {
if (props
.column
.prop === 'val
idityPeriod' && props
.column
.search
?.el === 'custom'
) {
const propKey = props
.column
.search
?.key
?? handleProp
(props
.column
.prop!
);
// 确保参数结构存在
if (!_searchParam
.value[propKey]
) {
_searchParam
.value[propKey] = {
start: '',
end: '',
unlimited: false
};
}
}
}
);
// 其他原有逻辑保持不变
...
const fieldNames = computed
(() => {
return {
label: props
.column
.fieldNames
?.label
?? "label",
value: props
.column
.fieldNames
?.value
?? "value",
children: props
.column
.fieldNames
?.children
?? "children"
};
}
);
const enumMap = inject
("enumMap", ref
(new Map
()));
const columnEnum = computed
(() => {
let enumData = enumMap
.value
.get
(props
.column
.prop
);
if (!enumData
) return [];
if (props
.column
.search
?.el === "select-v2" && props
.column
.fieldNames
) {
enumData = enumData
.map
((item: { [key: string]: any }
) => {
return {
...item, label: item[fieldNames
.value
.label], value: item[fieldNames
.value
.value] };
}
);
}
return enumData;
}
);
const handleSearchProps = computed
(() => {
const label = fieldNames
.value
.label;
const value = fieldNames
.value
.value;
const children = fieldNames
.value
.children;
const searchEl = props
.column
.search
?.el;
const searchElType = props
.column
.search
?.type;
let searchProps = props
.column
.search
?.props
?? {};
if (searchEl === "tree-select"
) {
searchProps = {
...searchProps, props: {
...searchProps
.props, label, children }, nodeKey: value };
}
if (searchEl === "cascader"
) {
searchProps = {
...searchProps, props: {
...searchProps
.props, label, value, children } };
}
if (searchEl === "input" && searchElType === 'textarea'
) {
searchProps = {
...searchProps, type: searchElType, autosize: { minRows: 1, maxRows: 1 } };
}
return searchProps;
}
);
const placeholder = computed
(() => {
const search = props
.column
.search;
if (["datetimerange", "daterange", "monthrange"]
.includes
(search
?.props
?.type
) || search
?.props
?.isRange
) {
return {
rangeSeparator: search
?.props
?.rangeSeparator
?? "至",
startPlaceholder: search
?.props
?.startPlaceholder
?? "开始时间",
endPlaceholder: search
?.props
?.endPlaceholder
?? "结束时间"
};
}
const placeholder = search
?.props
?.placeholder
?? (search
?.el
?.includes
("input"
) ? (search
?.placeholder || "请输入"
) : "请选择"
);
return { placeholder };
}
);
const clearable = computed
(() => {
const search = props
.column
.search;
if (search
?.el === "date-picker"
) return true;
return search
?.props
?.clearable
?? (search
?.defaultValue ==
null || search
?.defaultValue == undefined
);
}
);
</script>
<style scoped>
.val
idity-period-container {
display: flex;
align-items: center;
}
</style> 重置后类型为custom的模块消失了，并且报错TypeError: Cannot read properties of undefined
(reading 'start'
)
代码展示了从请求的查询字符串中解析参数id的过程。使用int.Parse方法尝试解析，若出现异常则将id赋值为1，体现了对请求参数解析异常的处理。
扫一扫
1269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
