github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-26 12:48:48 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(table): 彻底修复column.slots已废弃的antd报错, 所有用到的demo页修改为antd 3.x v-slot:headerCell 和 v-slot:bodyCell 写法 (#2030)

Browse Source 
Co-authored-by: 苗大 <v.caoshm@yoozoo.com>
This commit is contained in:
Wit〆苗大 2022-07-05 11:56:29 +08:00 committed by GitHub
parent a89e497e82
commit de7279399d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 228 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/demo/page/form/high/PersonTable.vue
View File

@ -1,8 +1,10 @@
<template> <template>
<div> <div>
<BasicTable @register="registerTable" @edit-change="handleEditChange"> <BasicTable @register="registerTable" @edit-change="handleEditChange">
<template #action="{ record, column }"> <template #bodyCell="{ column, record }">
<TableAction :actions="createActions(record, column)" /> <template v-if="column.key === 'action'">
<TableAction :actions="createActions(record, column)" />
</template>
</template> </template>
</BasicTable> </BasicTable>
<a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增成员 </a-button> <a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增成员 </a-button>
@ -65,7 +67,7 @@
width: 160, width: 160,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, // slots: { customRender: 'action' },
}, },
pagination: false, pagination: false,
}); });

52
src/views/demo/system/account/index.vue
View File

@ -5,31 +5,33 @@
<template #toolbar> <template #toolbar>
<a-button type="primary" @click="handleCreate">新增账号</a-button> <a-button type="primary" @click="handleCreate">新增账号</a-button>
</template> </template>
<template #action="{ record }"> <template #bodyCell="{ column, record }">
<TableAction <template v-if="column.key === 'action'">
:actions="[ <TableAction
{ :actions="[
icon: 'clarity:info-standard-line', {
tooltip: '查看用户详情', icon: 'clarity:info-standard-line',
onClick: handleView.bind(null, record), tooltip: '查看用户详情',
}, onClick: handleView.bind(null, record),
{
icon: 'clarity:note-edit-line',
tooltip: '编辑用户资料',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
tooltip: '删除此账号',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
}, },
}, {
]" icon: 'clarity:note-edit-line',
/> tooltip: '编辑用户资料',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
tooltip: '删除此账号',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </template>
</BasicTable> </BasicTable>
<AccountModal @register="registerModal" @success="handleSuccess" /> <AccountModal @register="registerModal" @success="handleSuccess" />
@ -77,7 +79,7 @@
width: 120, width: 120,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, // slots: { customRender: 'action' },
}, },
}); });

38
src/views/demo/system/dept/index.vue
View File

@ -4,24 +4,26 @@
<template #toolbar> <template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增部门 </a-button> <a-button type="primary" @click="handleCreate"> 新增部门 </a-button>
</template> </template>
<template #action="{ record }"> <template #bodyCell="{ column, record }">
<TableAction <template v-if="column.key === 'action'">
:actions="[ <TableAction
{ :actions="[
icon: 'clarity:note-edit-line', {
onClick: handleEdit.bind(null, record), icon: 'clarity:note-edit-line',
}, onClick: handleEdit.bind(null, record),
{
icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
}, },
}, {
]" icon: 'ant-design:delete-outlined',
/> color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </template>
</BasicTable> </BasicTable>
<DeptModal @register="registerModal" @success="handleSuccess" /> <DeptModal @register="registerModal" @success="handleSuccess" />
@ -62,7 +64,7 @@
width: 80, width: 80,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, // slots: { customRender: 'action' },
fixed: undefined, fixed: undefined,
}, },
}); });

38
src/views/demo/system/menu/index.vue
View File

@ -4,24 +4,26 @@
<template #toolbar> <template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增菜单 </a-button> <a-button type="primary" @click="handleCreate"> 新增菜单 </a-button>
</template> </template>
<template #action="{ record }"> <template #bodyCell="{ column, record }">
<TableAction <template v-if="column.key === 'action'">
:actions="[ <TableAction
{ :actions="[
icon: 'clarity:note-edit-line', {
onClick: handleEdit.bind(null, record), icon: 'clarity:note-edit-line',
}, onClick: handleEdit.bind(null, record),
{
icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
}, },
}, {
]" icon: 'ant-design:delete-outlined',
/> color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </template>
</BasicTable> </BasicTable>
<MenuDrawer @register="registerDrawer" @success="handleSuccess" /> <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
@ -63,7 +65,7 @@
width: 80, width: 80,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, // slots: { customRender: 'action' },
fixed: undefined, fixed: undefined,
}, },
}); });

38
src/views/demo/system/role/index.vue
View File

@ -4,24 +4,26 @@
<template #toolbar> <template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增角色 </a-button> <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
</template> </template>
<template #action="{ record }"> <template #bodyCell="{ column, record }">
<TableAction <template v-if="column.key === 'action'">
:actions="[ <TableAction
{ :actions="[
icon: 'clarity:note-edit-line', {
onClick: handleEdit.bind(null, record), icon: 'clarity:note-edit-line',
}, onClick: handleEdit.bind(null, record),
{
icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
}, },
}, {
]" icon: 'ant-design:delete-outlined',
/> color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template> </template>
</BasicTable> </BasicTable>
<RoleDrawer @register="registerDrawer" @success="handleSuccess" /> <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
@ -59,7 +61,7 @@
width: 80, width: 80,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, // slots: { customRender: 'action' },
fixed: undefined, fixed: undefined,
}, },
}); });

92
src/views/demo/table/AuthColumn.vue
View File

@ -1,55 +1,57 @@
<template> <template>
<div class="p-4"> <div class="p-4">
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #action="{ record }"> <template #bodyCell="{ column, record }">
<TableAction <template v-if="column.key === 'action'">
:actions="[ <TableAction
{ :actions="[
label: '编辑', {
onClick: handleEdit.bind(null, record), label: '编辑',
auth: 'other', // 根据权限控制是否显示: 无权限，不显示 onClick: handleEdit.bind(null, record),
}, auth: 'other', // 根据权限控制是否显示: 无权限，不显示
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
auth: 'super', // 根据权限控制是否显示: 有权限，会显示
},
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
title: '是否启用？',
confirm: handleOpen.bind(null, record),
}, },
ifShow: (_action) => { {
return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮 label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
auth: 'super', // 根据权限控制是否显示: 有权限，会显示
}, },
}, ]"
{ :dropDownActions="[
label: '禁用', {
popConfirm: { label: '启用',
title: '是否禁用？', popConfirm: {
confirm: handleOpen.bind(null, record), title: '是否启用？',
confirm: handleOpen.bind(null, record),
},
ifShow: (_action) => {
return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
},
}, },
ifShow: () => { {
return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮 label: '禁用',
popConfirm: {
title: '是否禁用？',
confirm: handleOpen.bind(null, record),
},
ifShow: () => {
return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮
},
}, },
}, {
{ label: '同时控制',
label: '同时控制', popConfirm: {
popConfirm: { title: '是否动态显示？',
title: '是否动态显示？', confirm: handleOpen.bind(null, record),
confirm: handleOpen.bind(null, record), },
auth: 'super', // 同时根据权限和业务控制是否显示
ifShow: () => {
return true;
},
}, },
auth: 'super', // 同时根据权限和业务控制是否显示 ]"
ifShow: () => { />
return true; </template>
},
},
]"
/>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
@ -104,7 +106,7 @@
width: 250, width: 250,
title: 'Action', title: 'Action',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, // slots: { customRender: 'action' },
}, },
}); });
function handleEdit(record: Recordable) { function handleEdit(record: Recordable) {

12
src/views/demo/table/CustomerCell.vue
View File

@ -3,20 +3,22 @@
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #bodyCell="{ column, record, text }"> <template #bodyCell="{ column, record, text }">
<template v-if="column.key === 'id'"> ID: {{ record.id }} </template> <template v-if="column.key === 'id'"> ID: {{ record.id }} </template>
<template v-if="column.key === 'no'"> <template v-else-if="column.key === 'no'">
<Tag color="green"> <Tag color="green">
{{ record.no }} {{ record.no }}
</Tag> </Tag>
</template> </template>
<template v-if="column.key === 'avatar'"> <template v-else-if="column.key === 'avatar'">
<Avatar :size="60" :src="record.avatar" /> <Avatar :size="60" :src="record.avatar" />
</template> </template>
<template v-if="column.key === 'imgArr'"> <template v-else-if="column.key === 'imgArr'">
<TableImg :size="60" :simpleShow="true" :imgList="text" /> <TableImg :size="60" :simpleShow="true" :imgList="text" />
</template> </template>
<template v-if="column.key === 'imgs'"> <TableImg :size="60" :imgList="text" /> </template> <template v-else-if="column.key === 'imgs'">
<TableImg :size="60" :imgList="text" />
</template>
<template v-if="column.key === 'category'"> <template v-else-if="column.key === 'category'">
<Tag color="green"> <Tag color="green">
{{ record.no }} {{ record.no }}
</Tag> </Tag>

8
src/views/demo/table/EditRowTable.vue
View File

@ -1,8 +1,10 @@
<template> <template>
<div class="p-4"> <div class="p-4">
<BasicTable @register="registerTable" @edit-change="onEditChange"> <BasicTable @register="registerTable" @edit-change="onEditChange">
<template #action="{ record, column }"> <template #bodyCell="{ column, record }">
<TableAction :actions="createActions(record, column)" /> <template v-if="column.key === 'action'">
<TableAction :actions="createActions(record, column)" />
</template>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
@ -180,7 +182,7 @@
width: 160, width: 160,
title: 'Action', title: 'Action',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, // slots: { customRender: 'action' },
}, },
}); });

47
src/views/demo/table/ExpandTable.vue
View File

@ -4,29 +4,31 @@
content="不可与scroll共用。TableAction组件可配置stopButtonPropagation来阻止操作按钮的点击事件冒泡，以便配合Table组件的expandRowByClick" content="不可与scroll共用。TableAction组件可配置stopButtonPropagation来阻止操作按钮的点击事件冒泡，以便配合Table组件的expandRowByClick"
> >
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #expandedRowRender="{ record }"> <template #bodyCell="{ column, record }">
<span>No: {{ record.no }} </span> <template v-if="column.key === 'no'">
</template> <span>No: {{ record.no }} </span>
<template #action="{ record }"> </template>
<TableAction <template v-else-if="column.key === 'action'">
stopButtonPropagation <TableAction
:actions="[ stopButtonPropagation
{ :actions="[
label: '删除', {
icon: 'ic:outline-delete-outline', label: '删除',
onClick: handleDelete.bind(null, record), icon: 'ic:outline-delete-outline',
}, onClick: handleDelete.bind(null, record),
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
title: '是否启用？',
confirm: handleOpen.bind(null, record),
}, },
}, ]"
]" :dropDownActions="[
/> {
label: '启用',
popConfirm: {
title: '是否启用？',
confirm: handleOpen.bind(null, record),
},
},
]"
/>
</template>
</template> </template>
</BasicTable> </BasicTable>
</PageWrapper> </PageWrapper>
@ -53,6 +55,7 @@
actionColumn: { actionColumn: {
width: 160, width: 160,
title: 'Action', title: 'Action',
dataIndex: 'action',
// slots: { customRender: 'action' }, // slots: { customRender: 'action' },
}, },
}); });

38
src/views/demo/table/FixedColumn.vue
View File

@ -1,25 +1,27 @@
<template> <template>
<div class="p-4"> <div class="p-4">
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #action="{ record }"> <template #bodyCell="{ column, record }">
<TableAction <template v-if="column.key === 'action'">
:actions="[ <TableAction
{ :actions="[
label: '删除', {
icon: 'ic:outline-delete-outline', label: '删除',
onClick: handleDelete.bind(null, record), icon: 'ic:outline-delete-outline',
}, onClick: handleDelete.bind(null, record),
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
title: '是否启用？',
confirm: handleOpen.bind(null, record),
}, },
}, ]"
]" :dropDownActions="[
/> {
label: '启用',
popConfirm: {
title: '是否启用？',
confirm: handleOpen.bind(null, record),
},
},
]"
/>
</template>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>

26
src/views/demo/table/FixedHeight.vue
View File

@ -1,15 +1,20 @@
<template> <template>
<div class="p-4"> <div class="p-4">
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #customTitle> <template #headerCell="{ column }">
<span> <template v-if="column.key === 'name'">
姓名 <span>
<BasicHelp class="ml-2" text="姓名" /> 姓名
</span> <BasicHelp class="ml-2" text="headerHelpMessage方式2" />
</template> </span>
<template #customAddress> </template>
地址 <template v-else-if="column.key === 'address'">
<FormOutlined class="ml-2" /> 地址
<FormOutlined class="ml-2" />
</template>
<template v-else>
<HeaderCell :column="column" />
</template>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
@ -21,9 +26,10 @@
import { FormOutlined } from '@ant-design/icons-vue'; import { FormOutlined } from '@ant-design/icons-vue';
import { demoListApi } from '/@/api/demo/table'; import { demoListApi } from '/@/api/demo/table';
import { BasicHelp } from '/@/components/Basic'; import { BasicHelp } from '/@/components/Basic';
import HeaderCell from '/@/components/Table/src/components/HeaderCell.vue';
export default defineComponent({ export default defineComponent({
components: { BasicTable, FormOutlined, BasicHelp }, components: { BasicTable, FormOutlined, BasicHelp, HeaderCell },
setup() { setup() {
const [registerTable] = useTable({ const [registerTable] = useTable({
title: '定高/头部自定义', title: '定高/头部自定义',

8
src/views/demo/table/tableData.tsx
View File

@ -117,6 +117,7 @@ export function getCustomHeaderColumns(): BasicColumn[] {
{ {
title: 'ID', title: 'ID',
dataIndex: 'id', dataIndex: 'id',
helpMessage: 'headerHelpMessage方式1',
width: 200, width: 200,
}, },
{ {
@ -256,7 +257,7 @@ export function getFormConfig(): Partial<FormProps> {
}; };
} }
export function getBasicData() { export function getBasicData() {
const data: any = (() => { return (() => {
const arr: any = []; const arr: any = [];
for (let index = 0; index < 40; index++) { for (let index = 0; index < 40; index++) {
arr.push({ arr.push({
@ -271,11 +272,10 @@ export function getBasicData() {
} }
return arr; return arr;
})(); })();
return data;
} }
export function getTreeTableData() { export function getTreeTableData() {
const data: any = (() => { return (() => {
const arr: any = []; const arr: any = [];
for (let index = 0; index < 40; index++) { for (let index = 0; index < 40; index++) {
arr.push({ arr.push({
@ -301,6 +301,4 @@ export function getTreeTableData() {
} }
return arr; return arr;
})(); })();
return data;
} }

21
src/views/sys/error-log/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="p-4"> <div class="p-4">
<template v-for="src in imgList" :key="src"> <template v-for="src in imgList" :key="src">
<img :src="src" v-show="false" /> <img :src="src" v-show="false" alt="" />
</template> </template>
<DetailModal :info="rowInfo" @register="registerModal" /> <DetailModal :info="rowInfo" @register="registerModal" />
<BasicTable @register="register" class="error-handle-table"> <BasicTable @register="register" class="error-handle-table">
@ -16,12 +16,17 @@
{{ t('sys.errorLog.fireAjaxError') }} {{ t('sys.errorLog.fireAjaxError') }}
</a-button> </a-button>
</template> </template>
<template #action="{ record }"> <template #bodyCell="{ column, record }">
<TableAction <template v-if="column.key === 'action'">
:actions="[ <TableAction
{ label: t('sys.errorLog.tableActionDesc'), onClick: handleDetail.bind(null, record) }, :actions="[
]" {
/> label: t('sys.errorLog.tableActionDesc'),
onClick: handleDetail.bind(null, record),
},
]"
/>
</template>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
@ -52,7 +57,7 @@
width: 80, width: 80,
title: 'Action', title: 'Action',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, // slots: { customRender: 'action' },
}, },
}); });
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();