Skip to content

B
basic-vue-admin
Unverified 提交 de727939 作者: Wit〆苗大 提交者： GitHub
操作

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

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

Co-authored-by: 苗大 <v.caoshm@yoozoo.com>
上级 a89e497e
正在显示 包含 228 行增加 和 198 行删除
src/views/demo/page/form/high/PersonTable.vue
<template>
<div>
<BasicTable @register="registerTable" @edit-change="handleEditChange">
<template #action="{ record, column }">
<TableAction :actions="createActions(record, column)" />
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction :actions="createActions(record, column)" />
</template>
</template>
</BasicTable>
<a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增成员 </a-button>
......@@ -65,7 +67,7 @@
width: 160,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
// slots: { customRender: 'action' },
},
pagination: false,
});
......
src/views/demo/system/account/index.vue
......@@ -5,31 +5,33 @@
<template #toolbar>
<a-button type="primary" @click="handleCreate">新增账号</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:info-standard-line',
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),
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:info-standard-line',
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),
},
},
]"
/>
</template>
</template>
</BasicTable>
<AccountModal @register="registerModal" @success="handleSuccess" />
......@@ -77,7 +79,7 @@
width: 120,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
// slots: { customRender: 'action' },
},
});
......
src/views/demo/system/dept/index.vue
......@@ -4,24 +4,26 @@
<template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增部门 </a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
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),
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
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),
},
},
]"
/>
</template>
</template>
</BasicTable>
<DeptModal @register="registerModal" @success="handleSuccess" />
......@@ -62,7 +64,7 @@
width: 80,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
// slots: { customRender: 'action' },
fixed: undefined,
},
});
......
src/views/demo/system/menu/index.vue
......@@ -4,24 +4,26 @@
<template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增菜单 </a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
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),
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
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),
},
},
]"
/>
</template>
</template>
</BasicTable>
<MenuDrawer @register="registerDrawer" @success="handleSuccess" />
......@@ -63,7 +65,7 @@
width: 80,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
// slots: { customRender: 'action' },
fixed: undefined,
},
});
......
src/views/demo/system/role/index.vue
......@@ -4,24 +4,26 @@
<template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
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),
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
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),
},
},
]"
/>
</template>
</template>
</BasicTable>
<RoleDrawer @register="registerDrawer" @success="handleSuccess" />
......@@ -59,7 +61,7 @@
width: 80,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
// slots: { customRender: 'action' },
fixed: undefined,
},
});
......
src/views/demo/table/AuthColumn.vue
<template>
<div class="p-4">
<BasicTable @register="registerTable">
<template #action="{ record }">
<TableAction
:actions="[
{
label: '编辑',
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),
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '编辑',
onClick: handleEdit.bind(null, record),
auth: 'other', // 根据权限控制是否显示: 无权限，不显示
},
ifShow: (_action) => {
return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
auth: 'super', // 根据权限控制是否显示: 有权限，会显示
},
},
{
label: '禁用',
popConfirm: {
title: '是否禁用？',
confirm: handleOpen.bind(null, record),
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
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: '同时控制',
popConfirm: {
title: '是否动态显示？',
confirm: handleOpen.bind(null, record),
{
label: '同时控制',
popConfirm: {
title: '是否动态显示？',
confirm: handleOpen.bind(null, record),
},
auth: 'super', // 同时根据权限和业务控制是否显示
ifShow: () => {
return true;
},
},
auth: 'super', // 同时根据权限和业务控制是否显示
ifShow: () => {
return true;
},
},
]"
/>
]"
/>
</template>
</template>
</BasicTable>
</div>
......@@ -104,7 +106,7 @@
width: 250,
title: 'Action',
dataIndex: 'action',
slots: { customRender: 'action' },
// slots: { customRender: 'action' },
},
});
function handleEdit(record: Recordable) {
......
src/views/demo/table/CustomerCell.vue
......@@ -3,20 +3,22 @@
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record, text }">
<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">
{{ record.no }}
</Tag>
</template>
<template v-if="column.key === 'avatar'">
<template v-else-if="column.key === 'avatar'">
<Avatar :size="60" :src="record.avatar" />
</template>
<template v-if="column.key === 'imgArr'">
<template v-else-if="column.key === 'imgArr'">
<TableImg :size="60" :simpleShow="true" :imgList="text" />
</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">
{{ record.no }}
</Tag>
......
src/views/demo/table/EditRowTable.vue
<template>
<div class="p-4">
<BasicTable @register="registerTable" @edit-change="onEditChange">
<template #action="{ record, column }">
<TableAction :actions="createActions(record, column)" />
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction :actions="createActions(record, column)" />
</template>
</template>
</BasicTable>
</div>
......@@ -180,7 +182,7 @@
width: 160,
title: 'Action',
dataIndex: 'action',
slots: { customRender: 'action' },
// slots: { customRender: 'action' },
},
});
......
src/views/demo/table/ExpandTable.vue
......@@ -4,29 +4,31 @@
content="不可与scroll共用。TableAction组件可配置stopButtonPropagation来阻止操作按钮的点击事件冒泡，以便配合Table组件的expandRowByClick"
>
<BasicTable @register="registerTable">
<template #expandedRowRender="{ record }">
<span>No: {{ record.no }} </span>
</template>
<template #action="{ record }">
<TableAction
stopButtonPropagation
:actions="[
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
},
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
title: '是否启用？',
confirm: handleOpen.bind(null, record),
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'no'">
<span>No: {{ record.no }} </span>
</template>
<template v-else-if="column.key === 'action'">
<TableAction
stopButtonPropagation
:actions="[
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
},
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
title: '是否启用？',
confirm: handleOpen.bind(null, record),
},
},
},
]"
/>
]"
/>
</template>
</template>
</BasicTable>
</PageWrapper>
......@@ -53,6 +55,7 @@
actionColumn: {
width: 160,
title: 'Action',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
......
src/views/demo/table/FixedColumn.vue
<template>
<div class="p-4">
<BasicTable @register="registerTable">
<template #action="{ record }">
<TableAction
:actions="[
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
},
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
title: '是否启用？',
confirm: handleOpen.bind(null, record),
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
},
},
]"
/>
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
title: '是否启用？',
confirm: handleOpen.bind(null, record),
},
},
]"
/>
</template>
</template>
</BasicTable>
</div>
......
src/views/demo/table/FixedHeight.vue
<template>
<div class="p-4">
<BasicTable @register="registerTable">
<template #customTitle>
<span>
姓名
<BasicHelp class="ml-2" text="姓名" />
</span>
</template>
<template #customAddress>
地址
<FormOutlined class="ml-2" />
<template #headerCell="{ column }">
<template v-if="column.key === 'name'">
<span>
姓名
<BasicHelp class="ml-2" text="headerHelpMessage方式2" />
</span>
</template>
<template v-else-if="column.key === 'address'">
地址
<FormOutlined class="ml-2" />
</template>
<template v-else>
<HeaderCell :column="column" />
</template>
</template>
</BasicTable>
</div>
......@@ -21,9 +26,10 @@
import { FormOutlined } from '@ant-design/icons-vue';
import { demoListApi } from '/@/api/demo/table';
import { BasicHelp } from '/@/components/Basic';
import HeaderCell from '/@/components/Table/src/components/HeaderCell.vue';
export default defineComponent({
components: { BasicTable, FormOutlined, BasicHelp },
components: { BasicTable, FormOutlined, BasicHelp, HeaderCell },
setup() {
const [registerTable] = useTable({
title: '定高/头部自定义',
......
src/views/demo/table/tableData.tsx
......@@ -117,6 +117,7 @@ export function getCustomHeaderColumns(): BasicColumn[] {
{
title: 'ID',
dataIndex: 'id',
helpMessage: 'headerHelpMessage方式1',
width: 200,
},
{
......@@ -256,7 +257,7 @@ export function getFormConfig(): Partial<FormProps> {
};
}
export function getBasicData() {
const data: any = (() => {
return (() => {
const arr: any = [];
for (let index = 0; index < 40; index++) {
arr.push({
......@@ -271,11 +272,10 @@ export function getBasicData() {
}
return arr;
})();
return data;
}
export function getTreeTableData() {
const data: any = (() => {
return (() => {
const arr: any = [];
for (let index = 0; index < 40; index++) {
arr.push({
......@@ -301,6 +301,4 @@ export function getTreeTableData() {
}
return arr;
})();
return data;
}
src/views/sys/error-log/index.vue
<template>
<div class="p-4">
<template v-for="src in imgList" :key="src">
<img :src="src" v-show="false" />
<img :src="src" v-show="false" alt="" />
</template>
<DetailModal :info="rowInfo" @register="registerModal" />
<BasicTable @register="register" class="error-handle-table">
......@@ -16,12 +16,17 @@
{{ t('sys.errorLog.fireAjaxError') }}
</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{ label: t('sys.errorLog.tableActionDesc'), onClick: handleDetail.bind(null, record) },
]"
/>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: t('sys.errorLog.tableActionDesc'),
onClick: handleDetail.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</div>
......@@ -52,7 +57,7 @@
width: 80,
title: 'Action',
dataIndex: 'action',
slots: { customRender: 'action' },
// slots: { customRender: 'action' },
},
});
const [registerModal, { openModal }] = useModal();
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论