nutui-react
nutui-react copied to clipboard
jdf2e
Table组件在左侧固定一列情况下在总宽度大于等于650px时候 table表头固定列的右侧阴影消失了
NutUI React 包名
@nutui/nutui-react
NutUI React 版本号
2.6.3
平台
h5
重现链接
https://codesandbox.io/p/devbox/autumn-snow-6rpywc?file=%2Fsrc%2FApp.tsx%3A71%2C18&workspaceId=e7816e7b-65cd-4fee-b8e9-70ab3d7fa2c2
重现步骤
/*
- @Description:
- @Author: 李思甜
- @Date: 2023-04-25 16:19:33
- @LastEditTime: 2024-05-10 09:24:07
- @LastEditors: 李思甜 */ import React, { useState } from 'react' import { Table } from '@nutui/nutui-react'
interface TableColumnProps { key: string title?: string align?: string sorter?: ((a: any, b: any) => number) | boolean | string render?: (rowData: any, rowIndex: number) => string | React.ReactNode fixed?: 'left' | 'right' width?: number } const Demo12 = () => { const [data6, setData6] = useState([ { name: 'Tom', sex: '男', record: '小学', birthday: '2010-01-01', age: 10, }, { name: 'Lucy', sex: '女', record: '本科', birthday: '2000-01-01', age: 30, }, { name: 'Jack', sex: '男', record: '高中', birthday: '2020-01-01', age: 4, }, { name: 'Sara', sex: '女', record: '高中', birthday: '2020-01-01', age: 6, }, { name: 'Frank', sex: '男', record: '幼儿园', birthday: '2020-01-01', age: 3, }, ])
const [columnsStickLeft, setColumnsStickLeft] = useState< Array<TableColumnProps>
([ { title: '姓名', key: 'name', align: 'center', fixed: 'left', width: 100, }, { title: '性别', key: 'sex', width: 60, }, { title: '学历', key: 'record', width: 100, }, { title: '生日', key: 'birthday', width: 100, }, { title: '年龄', key: 'age', width: 60, }, { title: '年龄', key: 'age', width: 60, }, { title: '年龄', key: 'age', width: 60, }, { title: '年龄', key: 'age', width: 60, }, ])
return (
期望的结果是什么？
Table固定左侧情况下 中大屏的固定列应该和小屏一样
实际的结果是什么？
左侧的固定列表头没有阴影
环境信息
No response
其他补充信息
No response
我这边测试 添加 word-wrap: break-word; word-break: break-all;是不生效的，主要原因是table设置了maxcontent导致没按照设定的固定宽度来展示，然后左侧固定表头阴影不显示是.nut-table-sticky-left,的zindex层级低了，将z-index改成4就好了
