fix(table): 修复部分由于场景下width未生效导致的一些问题 (#2241)

* fix(table): 修复由部分width不生效导致的一系列问题 * fix: web h5 demo
jdf2e · May 15, 2024 · 3a55a7a · 3a55a7a
1 parent ed9952f
commit 3a55a7a
Show file tree

Hide file tree

Showing 27 changed files with 220 additions and 243 deletions.
diff --git a/src/packages/table/demos/h5/demo1.tsx b/src/packages/table/demos/h5/demo1.tsx
@@ -12,11 +12,11 @@ interface TableColumnProps {
 }
 
 const Demo1 = () => {
-  const [columns1, setColumns1] = useState<Array<TableColumnProps>>([
+  const [columns] = useState<Array<TableColumnProps>>([
     {
       title: 'ID',
       key: 'id',
-      render: (record: any, index) => {
+      render: (_record: any, index) => {
         return index + 1
       },
     },
@@ -26,11 +26,11 @@ const Demo1 = () => {
     },
     {
       title: '性别',
-      key: 'sex',
+      key: 'gender',
       render: (record: any) => {
         return (
-          <span style={{ color: record.sex === '女' ? 'blue' : 'green' }}>
-            {record.sex}
+          <span style={{ color: record.gender === '女' ? 'blue' : 'green' }}>
+            {record.gender}
           </span>
         )
       },
@@ -41,24 +41,24 @@ const Demo1 = () => {
     },
   ])
 
-  const [data1, setData1] = useState([
+  const [data] = useState([
     {
       name: 'Tom',
-      sex: '男',
+      gender: '男',
       record: '小学',
     },
     {
       name: 'Lucy',
-      sex: '女',
+      gender: '女',
       record: '本科',
     },
     {
       name: 'Jack',
-      sex: '男',
+      gender: '男',
       record: '高中',
     },
   ])
 
-  return <Table columns={columns1} data={data1} />
+  return <Table columns={columns} data={data} />
 }
 export default Demo1
diff --git a/src/packages/table/demos/h5/demo10.tsx b/src/packages/table/demos/h5/demo10.tsx
@@ -12,28 +12,28 @@ interface TableColumnProps {
   width?: number
 }
 const Demo10 = () => {
-  const [data5, setData5] = useState([
+  const [data] = useState([
     {
       name: 'Tom',
-      sex: '男',
+      gender: '男',
       record: '小学',
       age: 10,
     },
     {
       name: 'Lucy',
-      sex: '女',
+      gender: '女',
       record: '本科',
       age: 30,
     },
     {
       name: 'Jack',
-      sex: '男',
+      gender: '男',
       record: '高中',
       age: 4,
     },
   ])
 
-  const [columns5, setColumns5] = useState<Array<TableColumnProps>>([
+  const [columns] = useState<Array<TableColumnProps>>([
     {
       title: '姓名',
       key: 'name',
@@ -42,7 +42,7 @@ const Demo10 = () => {
     },
     {
       title: '性别',
-      key: 'sex',
+      key: 'gender',
     },
     {
       title: '学历',
@@ -63,8 +63,8 @@ const Demo10 = () => {
 
   return (
     <Table
-      columns={columns5}
-      data={data5}
+      columns={columns}
+      data={data}
       onSort={handleSorter}
       style={{ background: '#fff' }}
       sorterIcon={<TriangleDown width="12px" height="12px" />}

diff --git a/src/packages/table/demos/h5/demo11.tsx b/src/packages/table/demos/h5/demo11.tsx
@@ -11,53 +11,53 @@ interface TableColumnProps {
   width?: number
 }
 const Demo11 = () => {
-  const [data6, setData6] = useState([
+  const [data] = useState([
     {
       name: 'Tom',
-      sex: '男',
+      gender: '男',
       record: '小学',
       birthday: '2010-01-01',
       age: 10,
     },
     {
       name: 'Lucy',
-      sex: '女',
+      gender: '女',
       record: '本科',
       birthday: '2000-01-01',
       age: 30,
     },
     {
       name: 'Jack',
-      sex: '男',
+      gender: '男',
       record: '高中',
       birthday: '2020-01-01',
       age: 4,
     },
     {
       name: 'Sara',
-      sex: '女',
+      gender: '女',
       record: '高中',
       birthday: '2020-01-01',
       age: 6,
     },
     {
       name: 'Frank',
-      sex: '男',
+      gender: '男',
       record: '幼儿园',
       birthday: '2020-01-01',
       age: 3,
     },
   ])
 
-  const [columns6, setColumns6] = useState<Array<TableColumnProps>>([
+  const [columns] = useState<Array<TableColumnProps>>([
     {
       title: '姓名',
       key: 'name',
       align: 'center',
     },
     {
       title: '性别',
-      key: 'sex',
+      key: 'gender',
     },
     {
       title: '学历',
@@ -75,8 +75,8 @@ const Demo11 = () => {
   const summaryContent = '这是总结栏'
   return (
     <Table
-      columns={columns6}
-      data={data6}
+      columns={columns}
+      data={data}
       style={{ height: 150 }}
       summary={summaryContent}
     />

diff --git a/src/packages/table/demos/h5/demo12.tsx b/src/packages/table/demos/h5/demo12.tsx
@@ -11,38 +11,38 @@ interface TableColumnProps {
   width?: number
 }
 const Demo12 = () => {
-  const [data6, setData6] = useState([
+  const [data] = useState([
     {
       name: 'Tom',
-      sex: '男',
+      gender: '男',
       record: '小学',
       birthday: '2010-01-01',
       age: 10,
     },
     {
       name: 'Lucy',
-      sex: '女',
+      gender: '女',
       record: '本科',
       birthday: '2000-01-01',
       age: 30,
     },
     {
       name: 'Jack',
-      sex: '男',
+      gender: '男',
       record: '高中',
       birthday: '2020-01-01',
       age: 4,
     },
     {
       name: 'Sara',
-      sex: '女',
+      gender: '女',
       record: '高中',
       birthday: '2020-01-01',
       age: 6,
     },
     {
       name: 'Frank',
-      sex: '男',
+      gender: '男',
       record: '幼儿园',
       birthday: '2020-01-01',
       age: 3,
@@ -61,26 +61,22 @@ const Demo12 = () => {
     },
     {
       title: '性别',
-      key: 'sex',
-      width: 60,
+      key: 'gender',
     },
     {
       title: '学历',
       key: 'record',
-      width: 100,
     },
     {
       title: '生日',
       key: 'birthday',
-      width: 100,
     },
     {
       title: '年龄',
       key: 'age',
-      width: 60,
     },
   ])
 
-  return <Table columns={columnsStickLeft} data={data6} />
+  return <Table columns={columnsStickLeft} data={data} />
 }
 export default Demo12
diff --git a/src/packages/table/demos/h5/demo13.tsx b/src/packages/table/demos/h5/demo13.tsx
@@ -11,67 +11,61 @@ interface TableColumnProps {
   width?: number
 }
 const Demo13 = () => {
-  const [data6, setData6] = useState([
+  const [data] = useState([
     {
       name: 'Tom',
-      sex: '男',
+      gender: '男',
       record: '小学',
       birthday: '2010-01-01',
       age: 10,
     },
     {
       name: 'Lucy',
-      sex: '女',
+      gender: '女',
       record: '本科',
       birthday: '2000-01-01',
       age: 30,
     },
     {
       name: 'Jack',
-      sex: '男',
+      gender: '男',
       record: '高中',
       birthday: '2020-01-01',
       age: 4,
     },
     {
       name: 'Sara',
-      sex: '女',
+      gender: '女',
       record: '高中',
       birthday: '2020-01-01',
       age: 6,
     },
     {
       name: 'Frank',
-      sex: '男',
+      gender: '男',
       record: '幼儿园',
       birthday: '2020-01-01',
       age: 3,
     },
   ])
 
-  const [columnsStickRight, setColumnsStickRight] = useState<
-    Array<TableColumnProps>
-  >([
+  const [columnsStickRight] = useState<Array<TableColumnProps>>([
     {
       title: '姓名',
       key: 'name',
       align: 'center',
-      width: 100,
     },
     {
       title: '性别',
-      key: 'sex',
-      width: 60,
+      key: 'gender',
     },
     {
       title: '学历',
       key: 'record',
-      width: 100,
     },
     {
       title: '生日',
       key: 'birthday',
-      width: 100,
     },
     {
       title: '年龄',
@@ -81,6 +75,6 @@ const Demo13 = () => {
     },
   ])
 
-  return <Table columns={columnsStickRight} data={data6} />
+  return <Table columns={columnsStickRight} data={data} />
 }
 export default Demo13
diff --git a/src/packages/table/demos/h5/demo2.tsx b/src/packages/table/demos/h5/demo2.tsx
@@ -12,40 +12,40 @@ interface TableColumnProps {
 }
 
 const Demo2 = () => {
-  const [columns2, setColumns2] = useState<Array<TableColumnProps>>([
+  const [columns] = useState<Array<TableColumnProps>>([
     {
       title: '姓名',
       key: 'name',
       align: 'center',
     },
     {
       title: '性别',
-      key: 'sex',
+      key: 'gender',
     },
     {
       title: '学历',
       key: 'record',
     },
   ])
 
-  const [data1, setData1] = useState([
+  const [data] = useState([
     {
       name: 'Tom',
-      sex: '男',
+      gender: '男',
       record: '小学',
     },
     {
       name: 'Lucy',
-      sex: '女',
+      gender: '女',
       record: '本科',
     },
     {
       name: 'Jack',
-      sex: '男',
+      gender: '男',
       record: '高中',
     },
   ])
 
-  return <Table columns={columns2} data={data1} bordered={false} />
+  return <Table columns={columns} data={data} bordered={false} />
 }
 export default Demo2