<template>
<div ref
="wrapRef" :class
="getWrapperClass">
<BasicForm
ref
="formRef"
submitOnReset
v
-bind
="getFormProps"
v
-if
="getBindValues
.useSearchForm"
:
tableAction
="
tableAction"
@register
="registerForm"
@submit
="handleSearchInfoChange"
@advanced
-change
="redoHeight"
@field
-value
-change
="useDebounceFn(redoHeight, 3
00)
()"
class
="search
-form">
<template #[replaceFormSlotKey(item)]
="data" v
-for
="item in getFormSlotKeys">
<slot :name
="item" v
-bind
="data || {}"></slot>
</template>
</BasicForm>
<button @click
="getFrom">123123</button>
<
Table
ref
="
tableElRef"
v
-bind
="getBindValues"
class
="ant
-table-striped"
:rowClassName
="getCellStyle"
v
-show
="getEmptyDataIsShow
Table"
@change
="handle
TableChange"
@resizeColumn
="handleResizeColumn">
<template #[item]
="data" v
-for
="item in Object
.keys($slots)" :key
="item">
<slot :name
="item" v
-bind
="data || {}"></slot>
</template>
<template #headerCell
="{ column }">
<HeaderCell :column
="getcolumn(column)" />
</template>
<template #bodyCell
="data">
<slot name
="bodyCell" v
-bind
="data || {}"></slot>
</template>
</
Table>
</div>
</template>
<script lang
="ts">
import type { Basic
TableProps,
TableActionType, SizeType, ColumnChangeParam } from '
./types/
table';
import { BasicForm, useForm } from '@/components/Form';
import { PageWrapperFixedHeightKey } from '@/enums/pageEnum';
import { InnerHandlers } from '
./types/
table';
import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect, onMounted, reactive, watch } from 'vue';
import {
Table } from 'ant
-design
-vue';
import HeaderCell from '
./components/HeaderCell
.vue';
import { usePagination } from '
./hooks/usePagination';
import { useColumns } from '
./hooks/useColumns';
import { useDataSource } from '
./hooks/useDataSource';
import { useLoading } from '
./hooks/useLoading';
import { useRowSelection } from '
./hooks/useRowSelection';
import { use
TableScroll } from '
./hooks/use
TableScroll';
import { use
TableScrollTo } from '
./hooks/useScrollTo';
import { useCustomRow } from '
./hooks/useCustomRow';
import { use
TableStyle } from '
./hooks/use
TableStyle';
import { use
TableHeader } from '
./hooks/use
TableHeader';
import { use
TableExpand } from '
./hooks/use
TableExpand';
import { create
TableContext } from '
./hooks/use
TableContext';
import { use
TableFooter } from '
./hooks/use
TableFooter';
import { use
TableForm } from '
./hooks/use
TableForm';
import { useDesign } from '@/hooks/web/useDesign';
import { useDebounceFn } from '@vueuse/core';
import { omit } from 'lodash
-es';
import { basicProps } from '
./props';
import { isFunction } from '@/utils/is';
import { warn } from '@/utils/log';
export default defineComponent({
name: 'Basic
Table',
components: {
Table,
BasicForm,
HeaderCell,
},
props: {
...basicProps,
loading: {
type: Boolean,
default: false, // 默认值
},
dataSource: {
type: Array,
default:
() => [], // 允许外部传入数据源，默认为空数组
},
pagination: {
type: Object,
default:
() => ({}), // 默认值
},
},
emits: [
'fetch
-success',
'fetch
-error',
'selection
-change',
'register',
'row
-click',
'row
-dbClick',
'row
-contextmenu',
'row
-mouseenter',
'row
-mouseleave',
'edit
-end',
'edit
-cancel',
'edit
-row
-end',
'edit
-change',
'expanded
-rows
-change',
'change',
'columns
-change',
'changeMenu',
],
setup(props, { attrs, emit, slots, expose }) {
const
tableElRef
= ref(null);
const
tableData
= ref<Recordable[]>([]);
const wrapRef
= ref(null);
const formRef
= ref(null);
const innerPropsRef
= ref<Partial<Basic
TableProps>>
();
const { prefixCls }
= useDesign('basic
-table');
const [registerForm, formActions]
= useForm
();
const getProps
= computed(
() => {
return {
...props,
...unref(innerPropsRef) } as Basic
TableProps;
});
const isFixedHeightPage
= inject(PageWrapperFixedHeightKey, false);
watchEffect(
() => {
unref(isFixedHeightPage) &&
props
.canResize &&
warn("'canResize' of Basic
Table may not work in PageWrapper with 'fixedHeight' (especially in hot updates)");
});
const { getLoading, setLoading }
= useLoading(getProps);
const { getPaginationInfo, getPagination, setPagination, setShowPagination, getShowPagination }
= usePagination(getProps);
const {
getRowSelection,
getRowSelectionRef,
getSelectRows,
setSelectedRows,
clearSelectedRowKeys,
getSelectRowKeys,
deleteSelectRowByKey,
setSelectedRowKeys,
}
= useRowSelection(getProps,
tableData, emit);
const { getExpandOption, expandAll, expandRows, collapseAll, getIsExpanded }
= use
TableExpand(getProps,
tableData, emit);
const {
handle
TableChange: on
TableChange,
ge
tDataSourceRef,
ge
tDataSource,
getRawDataSource,
getFetchParams,
set
TableData,
update
TableDataRecord,
delete
TableDataRecord,
insert
TableDataRecord,
find
TableDataRecord,
fetch,
getRowKey,
reload,
getAutoCreateKey,
update
TableData,
}
= useDataSource(
getProps,
{
tableData,
getPaginationInfo,
setLoading,
setPagination,
getFieldsValue: formActions
.getFieldsValue,
clearSelectedRowKeys,
expandAll,
},
emit,
);
const addFakeData
= () => {
if (props
.dataSource
.length === 0) {
tableData
.value
= [];
} else {
tableData
.value
= props
.dataSource; // 使用传入的数据源
}
};
function handle
TableChange(
...args) {
on
TableChange
.call(undefined,
...args);
emit('change',
...args);
// 解决通过use
Table注册onChange时不起作用的问题
const { onChange }
= unref(getProps);
onChange && isFunction(onChange) && onChange
.call(undefined,
...args);
}
const { getViewColumns, getColumns, setCacheColumnsByField, setCacheColumns, setColumns, getColumnsRef, getCacheColumns }
= useColumns(
getProps,
getPaginationInfo,
);
const { getScrollRef, redoHeight }
= use
TableScroll(getProps,
tableElRef, getColumnsRef, getRowSelectionRef, ge
tDataSourceRef, wrapRef, formRef);
const { scrollTo }
= use
TableScrollTo(
tableElRef, ge
tDataSourceRef);
const { customRow }
= useCustomRow(getProps, {
setSelectedRowKeys,
getSelectRowKeys,
clearSelectedRowKeys,
getAutoCreateKey,
emit,
});
const { getRowClassName }
= use
TableStyle(getProps, prefixCls);
const handlers: InnerHandlers
= {
onColumnsChange: (data: ColumnChangeParam[])
=> {
emit('columns
-change', data);
unref(getProps)
.onColumnsChange?
.(data);
},
};
const { getHeaderProps }
= use
TableHeader(getProps, slots, handlers);
const { getFooterProps }
= use
TableFooter(getProps, getScrollRef,
tableElRef, ge
tDataSourceRef);
const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange }
= use
TableForm(getProps, slots, fetch, getLoading);
const getBindValues
= computed(
() => {
const dataSource
= unref(ge
tDataSourceRef);
let propsData: Recordable
= {
...attrs,
...unref(getProps),
customRow: unref(getProps)
.customRow || customRow,
...unref(getHeaderProps),
scroll: unref(getScrollRef),
loading: unref(getLoading),
tableLayout: 'fixed',
rowSelection: unref(getRowSelectionRef),
rowKey: unref(getRowKey),
columns: toRaw(unref(getViewColumns)),
pagination: toRaw(unref(getPaginationInfo)),
dataSource,
footer: unref(getFooterProps),
...unref(getExpandOption),
};
propsData
= omit(propsData, ['class', 'onChange']);
return propsData;
});
const getWrapperClass
= computed(
() => {
const values
= unref(getBindValues);
return [
prefixCls,
attrs
.class,
{
[`${prefixCls}
-form
-container`]: values
.useSearchForm,
[`${prefixCls}
--inset`]: values
.inset,
},
];
});
const getEmptyDataIsShow
Table = computed(
() => {
const { emptyDataIsShow
Table, useSearchForm }
= unref(getProps);
if (emptyDataIsShow
Table || !useSearchForm) {
return true;
}
return !!unref(ge
tDataSourceRef)
.length;
});
function getcolumn(column: any) {
//
console.log(column);
if (!column
.hasOwnProperty('fixed') && column
.hasOwnProperty('width') && (column
.key !
= undefined || column
.key !
= null)) {
column
.resizable
= true;
}
return column;
}
function handleResizeColumn(w, col) {
col
.width
= w;
}
function setProps(props: Partial<Basic
TableProps>) {
innerPropsRef
.value
= {
...unref(innerPropsRef),
...props };
}
const
tableAction:
TableActionType
= {
reload,
getSelectRows,
setSelectedRows,
clearSelectedRowKeys,
getSelectRowKeys,
deleteSelectRowByKey,
setPagination,
set
TableData,
update
TableDataRecord,
delete
TableDataRecord,
insert
TableDataRecord,
find
TableDataRecord,
redoHeight,
setSelectedRowKeys,
setColumns,
setLoading,
ge
tDataSource,
getRawDataSource,
getFetchParams,
setProps,
getRowSelection,
getPaginationRef: getPagination,
getColumns,
getCacheColumns,
emit,
update
TableData,
setShowPagination,
getShowPagination,
setCacheColumnsByField,
expandAll,
expandRows,
collapseAll,
getIsExpanded,
scrollTo,
getSize:
() => {
return unref(getBindValues)
.size as SizeType;
},
setCacheColumns,
};
create
TableContext({
...tableAction, wrapRef, getBindValues });
expose(
tableAction);
emit('register',
tableAction, formActions);
onMounted(
() => {
addFakeData
(); // 添加假数据
});
function getCellStyle(record, index) {
return index % 2
=== 0 ? 'ant
-table-row
-even' : 'ant
-table-row
-odd'; // 根据索引返回不同的类名
}
function getFrom
() {
console.log(formActions
.submit,useForm
(),formRef)
}
return {
getCellStyle,
formRef,
tableElRef,
getBindValues,
getLoading,
registerForm,
handleSearchInfoChange,
getEmptyDataIsShow
Table,
handle
TableChange,
getRowClassName,
wrapRef,
tableAction,
redoHeight,
getFormProps: getFormProps as any,
replaceFormSlotKey,
getFormSlotKeys,
getWrapperClass,
columns: getViewColumns,
useDebounceFn,
getcolumn,
handleResizeColumn,
getFrom
};
},
});
</script>
<style lang
="less">
.ant
-table-tbody > tr
.ant
-table-row
-even >
td {
background
-color: #fafafa;
}
.ant
-table-resize
-handle {
border
-left: 1px solid #fafafa !important;
// width: 1px !important;
}
.ant
-table-tbody > tr
.ant
-table-row
-odd >
td {
background
-color: #fff;
}
@border
-color: #cecece4d;
@prefix
-cls: ~'@{namespace}
-basic
-table';
[data
-theme
='dark'] {
.ant
-table-tbody > tr:hover
.ant
-table-row
-selected >
td,
.ant
-table-tbody > tr
.ant
-table-row
-selected
td {
background
-color: #262626;
}
}
.@{prefix
-cls} {
max
-width: 1
00%;
height: 1
00%;
&
-row__striped {
td {
background
-color: @app
-content
-background;
}
}
&
-form
-container {
.ant
-form {
width: 1
00%;
padding: 1
0px 1
0px
0;
margin
-bottom: 1
0px;
background
-color: @component
-background;
}
}
.ant
-table-cell {
.ant
-tag {
margin
-right:
0;
}
}
.ant
-table-wrapper {
height: 1
00%;
background
-color: @component
-background;
border
-radius: 2px;
.ant
-table-title {
min
-height: 4
0px;
padding:
0 !important;
}
.ant
-table.ant
-table-bordered
.ant
-table-title {
border: none !important;
}
}
.ant
-table {
width: 1
00%;
overflow
-x: hidden;
&
-title {
display: flex;
border
-bottom: none;
justify
-content: space
-between;
align
-items: center;
}
}
.ant
-table-pagination
.ant
-pagination {
margin: 1
0px
0 0;
padding:
0 1
0px 1
0px;
}
.ant
-table-footer {
padding:
0;
.ant
-table-wrapper {
padding:
0;
}
table {
border: none !important;
}
.ant
-table-body {
overflow
-x: hidden !important;
}
td {
padding: 12px 8px;
}
}
&
--inset {
.ant
-table-wrapper {
padding:
0;
}
}
}
</style>
获取formRef
.value为null
本文介绍如何在 BootstrapTable 的指定行和列动态添加按钮。通过将操作放入 window.onload 函数中确保 DOM 完全加载后执行，解决了无法正确获取元素的问题。
扫一扫
2906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
