-
Notifications
You must be signed in to change notification settings - Fork 339
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Table] 当resizable和columnController同时存在时,去掉很多列后出现异常 #2363
Labels
to be published
fixed, not be published
Comments
👋 @huangpiqiao,感谢给 TDesign 提出了 issue。 |
|
fixed 1.4.5 |
在设置了吸顶功能后,还是会出现此情况 |
注意,去除代码中的 |
16 tasks
PR #2606 合并后,按照下述步骤检查代码:
2023-07-23.15.58.04.mov<template>
<!-- 注意组件父元素的宽度 -->
<div
class="tdesign-demo-block-column-large tdesign-demo__table"
style="width: 100%"
>
<t-table
rowKey="index"
:data="data"
:columns="columns"
:footData="footData"
:rowClassName="rowClassName"
:pagination="{ defaultCurrent: 1, defaultPageSize: 5, total: TOTAL }"
:headerAffixedTop="headerAffixedTopProps"
:paginationAffixedBottom="paginationAffixedBottom"
table-layout="fixed"
dragSort="col"
bordered
resizable
@drag-sort="onDragSortChange"
:displayColumns.sync="displayColumns"
:columnController="{
fields: ['channel', 'status', 'detail.email', 'createTime', 'matters'],
dialogProps: { preventScrollThrough: true },
}"
>
<template #t-foot-required> 插槽渲染表尾 </template>
</t-table>
</div>
</template>
<script lang="jsx">
import {
ErrorCircleFilledIcon,
CheckCircleFilledIcon,
CloseCircleFilledIcon,
} from "tdesign-icons-vue";
function getData(count) {
const data = [];
for (let i = 0; i < count; i++) {
data.push({
index: i + 1,
applicant: ["贾明", "张三", "王芳"][i % 3],
status: i % 3,
channel: ["电子签署", "纸质签署", "纸质签署"][i % 3],
detail: {
email: [
"w.cezkdudy@lhll.au",
"r.nmgw@peurezgn.sl",
"p.cumx@rampblpa.ru",
][i % 3],
},
matters: [
"宣传物料制作费用",
"algolia 服务报销",
"相关周边制作费",
"激励奖品快递费",
][i % 4],
time: [2, 3, 1, 4][i % 4],
createTime: [
"2022-01-01",
"2022-02-01",
"2022-03-01",
"2022-04-01",
"2022-05-01",
][i % 4],
});
}
return data;
}
const TOTAL = 38;
function getColumns(h, { fixedLeftColumn, fixedRightColumn }) {
return [
{
align: "left",
colKey: "applicant",
title: "申请人",
foot: () => <b style="font-weight: bold">表尾信息</b>,
width: "120",
fixed: fixedLeftColumn ? "left" : undefined,
},
{
colKey: "status",
title: "申请状态",
width: "150",
cell: (h, { row }) => {
const statusNameListMap = {
0: {
label: "审批通过",
theme: "success",
icon: <CheckCircleFilledIcon />,
},
1: {
label: "审批失败",
theme: "danger",
icon: <CloseCircleFilledIcon />,
},
2: {
label: "审批过期",
theme: "warning",
icon: <ErrorCircleFilledIcon />,
},
};
return (
<t-tag
shape="round"
theme={statusNameListMap[row.status].theme}
variant="light-outline"
>
{statusNameListMap[row.status].icon}
{statusNameListMap[row.status].label}
</t-tag>
);
},
},
{ colKey: "channel", title: "签署方式", width: "120" },
{ colKey: "detail.email", title: "邮箱地址", ellipsis: true },
{ colKey: "matters", title: "申请事项", ellipsis: true },
{ colKey: "createTime", title: "申请时间" },
{
colKey: "operation",
title: "操作",
cell: (h, { row }) => (
<t-link hover="color" theme="primary">
{row.status === 0 ? "查看详情" : "再次申请"}
</t-link>
),
width: 120,
foot: "-",
fixed: fixedRightColumn ? "right" : undefined,
},
];
}
const staticColumn = ["applicant", "operation"];
export default {
data() {
return {
data: getData(TOTAL),
TOTAL,
headerAffixedTopProps: { offsetTop: 0, zIndex: 1000 },
// 重要:如果在预渲染场景下,初次渲染的表格宽度和最终呈现宽度不一样,请异步设置表头吸顶
headerAffixedTop: true,
footerAffixedBottom: false,
fixedLeftColumn: true,
fixedRightColumn: true,
horizontalScrollAffixedBottom: true,
paginationAffixedBottom: true,
// 表尾有一行数据
footData: [{ index: "footer-row-1", type: "全部类型", description: "-" }],
columns: [],
displayColumns: staticColumn.concat([
"channel",
"status",
"detail.email",
"createTime",
"matters",
]),
};
},
watch: {
// 底部滚动条 和 Footer 无需同时出现,二选一即可
horizontalScrollAffixedBottom(val) {
val && (this.footerAffixedBottom = false);
},
// 底部滚动条 和 Footer 无需同时出现,二选一即可
footerAffixedBottom(val) {
val && (this.horizontalScrollAffixedBottom = false);
},
// 左侧固定列发生变化时
fixedLeftColumn: {
handler(val) {
this.columns = getColumns(this.$createElement, {
fixedLeftColumn: val,
fixedRightColumn: this.fixedRightColumn,
});
},
immediate: true,
},
// 右侧固定列发生变化时
fixedRightColumn(val) {
this.columns = getColumns(this.$createElement, {
fixedLeftColumn: this.fixedLeftColumn,
fixedRightColumn: val,
});
},
},
methods: {
// type 可选值:foot 和 body
rowClassName({ type }) {
if (type === "foot") return "t-tdesign__custom-footer-tr";
return "t-tdesign__custom-body-tr";
},
onDragSortChange({ newData }) {
this.columns = newData;
},
},
};
</script> |
16 tasks
fixed in 1.5.0 |
This was referenced Jul 26, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
tdesign-vue 版本
1.2.7
重现链接
https://codesandbox.io/s/tdesign-vue-demo-forked-ft8w33?file=/src/demo.vue
重现步骤
762_1682491999.mp4
期望结果
去掉很多列后表格内容正常显示
实际结果
去掉很多列后滚动条异常且有些列无法看到
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
The text was updated successfully, but these errors were encountered: