diff --git a/src/packages/datepicker/datepicker.taro.tsx b/src/packages/datepicker/datepicker.taro.tsx index 44684607d938d0adcd332bc4d54a12365c96ec85..3f00a89c2397434bbbfcf7c2cb439cc004246da5 100644 --- a/src/packages/datepicker/datepicker.taro.tsx +++ b/src/packages/datepicker/datepicker.taro.tsx @@ -22,7 +22,14 @@ export interface DatePickerProps { modelValue: Date | null visible: boolean title: string - type: 'date' | 'time' | 'year-month' | 'month-day' | 'datehour' | 'datetime' + type: + | 'date' + | 'time' + | 'year-month' + | 'month-day' + | 'datehour' + | 'datetime' + | 'hour-minutes' isShowChinese: boolean minuteStep: number minDate: Date @@ -207,6 +214,9 @@ export const DatePicker: FunctionComponent< case 'year-month': result = result.slice(0, 2) break + case 'hour-minutes': + result = result.slice(3, 5) + break case 'month-day': result = result.slice(1, 3) break diff --git a/src/packages/datepicker/datepicker.tsx b/src/packages/datepicker/datepicker.tsx index ab42cb86cff3b2333000b5c41d13dec2c22fd5e4..edabdc6aea99074bad8747fc633b3c7884e9786a 100644 --- a/src/packages/datepicker/datepicker.tsx +++ b/src/packages/datepicker/datepicker.tsx @@ -22,7 +22,14 @@ export interface DatePickerProps { modelValue: Date | null visible: boolean title: string - type: 'date' | 'time' | 'year-month' | 'month-day' | 'datehour' | 'datetime' + type: + | 'date' + | 'time' + | 'year-month' + | 'month-day' + | 'datehour' + | 'datetime' + | 'hour-minutes' isShowChinese: boolean minuteStep: number minDate: Date @@ -206,6 +213,9 @@ export const DatePicker: FunctionComponent< case 'year-month': result = result.slice(0, 2) break + case 'hour-minutes': + result = result.slice(3, 5) + break case 'month-day': result = result.slice(1, 3) break diff --git a/src/packages/datepicker/demo.taro.tsx b/src/packages/datepicker/demo.taro.tsx index a9f2a42a480dfa73eaecf533f5e6b0b3d64d66fd..b5344d9473466bec6f1d2a7baf23f36faf5431dd 100644 --- a/src/packages/datepicker/demo.taro.tsx +++ b/src/packages/datepicker/demo.taro.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react' +import Taro from '@tarojs/taro' import { Cell, DatePicker } from '@/packages/nutui.react.taro' import Header from '@/sites/components/header' -import Taro from '@tarojs/taro' +import { useTranslate } from '@/sites/assets/locale/taro' interface PickerOption { text: string | number @@ -11,7 +12,77 @@ interface PickerOption { className?: string | number } +interface T { + [props: string]: string +} + const DatePickerDemo = () => { + const [translated] = useTranslate({ + 'zh-CN': { + basic: '选择日期', + showChinese: '显示中文', + mmdd: '选择月日', + showAll: '选择年月日时分', + time: '选择时分秒', + hourMinutes: '选择时分', + format: '格式化选项', + stepMins: '分钟数递增步长设置', + filter: '过滤选项', + setStartEnd: '限制开始结束时间', + chooseDate: '日期时间选择', + chooseTime: '时间选择', + forever: '永远有效', + year: '年', + month: '月', + day: '日', + hour: '时', + min: '分', + seconds: '秒', + }, + 'zh-TW': { + basic: '選擇日期', + showChinese: '顯示中文', + mmdd: '選擇月日', + showAll: '選擇年月日時分', + time: '選擇時分秒', + hourMinutes: '選擇時分', + format: '格式化选项', + stepMins: '分鐘數遞增步長設置', + filter: '過濾選項', + setStartEnd: '限制開始結束時間', + chooseDate: '日期時間選擇', + chooseTime: '時間選擇', + forever: '永遠有效', + year: '年', + month: '月', + day: '日', + hour: '時', + min: '分', + seconds: '秒', + }, + 'en-US': { + basic: 'Choose Date', + showChinese: 'Show Chinese', + mmdd: 'Choose Month-Day', + showAll: 'Choose DateTime', + time: 'Choose Time', + hourMinutes: 'Selective time', + format: 'Option Formatter', + stepMins: 'Option Steps', + filter: 'Option Filter', + setStartEnd: 'Limit the start and end time', + chooseDate: 'Choose Time', + chooseTime: 'Choose Time', + forever: 'Forever', + year: 'Year', + month: 'Month', + day: 'Day', + hour: 'Hour', + min: 'Minute', + seconds: 'Second', + }, + }) + const minDate = new Date(2020, 0, 1) const maxDate = new Date(2025, 10, 1) const [desc1, setDesc1] = useState('2012年 01月 01日') @@ -21,6 +92,7 @@ const DatePickerDemo = () => { const [desc5, setDesc5] = useState('2020年 05月 10日 10:10') const [desc6, setDesc6] = useState('10:10:00') const [desc7, setDesc7] = useState('2022年05月10日 00时') + const [desc8, setDesc8] = useState('10:10') const [show1, setShow1] = useState(false) const [show2, setShow2] = useState(false) @@ -29,6 +101,7 @@ const DatePickerDemo = () => { const [show5, setShow5] = useState(false) const [show6, setShow6] = useState(false) const [show7, setShow7] = useState(false) + const [show8, setShow8] = useState(false) const confirm1 = (values: (string | number)[], options: PickerOption[]) => { setDesc1(options.map((option) => option.text).join(' ')) @@ -68,6 +141,10 @@ const DatePickerDemo = () => { setDesc7(options.map((option) => option.text).join(' ')) } + const confirm8 = (values: (string | number)[], options: PickerOption[]) => { + setDesc8(options.map((option) => option.text).join(':')) + } + const filter = (type: string, options: PickerOption[]) => { if (type === 'hour') { return options.filter((option) => Number(option.value) % 6 === 0) @@ -82,16 +159,16 @@ const DatePickerDemo = () => { op.text += '' break case 'month': - op.text += '月' + op.text += translated.month break case 'day': - op.text += '日' + op.text += translated.day break case 'hour': - op.text += '时' + op.text += translated.hour break case 'minute': - op.text += '分' + op.text += translated.min break default: op.text += '' @@ -103,16 +180,16 @@ const DatePickerDemo = () => { const op = option switch (type) { case 'year': - op.text += `年` + op.text += translated.year break case 'month': - op.text += `月` + op.text += translated.month break case 'day': - op.text += `日` + op.text += translated.day break case 'hour': - op.text += `时` + op.text += translated.hour break default: op.text += '' @@ -124,37 +201,57 @@ const DatePickerDemo = () => { <>
-

选择日期

- setShow1(true)} /> -

选择月日

+

{translated.basic}

+ setShow1(true)} + /> +

{translated.mmdd}

setShow2(true)} /> - -

选择年月日时分

+

{translated.showAll}

setShow3(true)} /> - -

选择时分秒

- setShow4(true)} /> - -

格式化选项

- setShow5(true)} /> - -

分钟数递增步长设置

- setShow6(true)} /> - -

过滤选项

- setShow7(true)} /> - +

{translated.time}

+ setShow4(true)} + /> +

{translated.hourMinutes}

+ setShow8(true)} + /> +

{translated.format}

+ setShow5(true)} + /> +

{translated.stepMins}

+ setShow6(true)} + /> +

{translated.filter}

+ setShow7(true)} + /> {/* 选择日期 */} setShow1(false)} @@ -163,7 +260,7 @@ const DatePickerDemo = () => { /> {/* 选择月日 */} { /> {/* 选择年月日时分 */} { /> {/* 选择时分秒 */} { onCloseDatePicker={() => setShow4(false)} onConfirmDatePicker={(values, options) => confirm4(values, options)} /> - + {/* 选择时分 */} + setShow8(false)} + onConfirmDatePicker={(values, options) => confirm8(values, options)} + /> {/* 格式化选项 */} { /> {/* 分钟步长 */} { onCloseDatePicker={() => setShow6(false)} onConfirmDatePicker={(values, options) => confirm6(values, options)} /> - {/* 过滤选项 */} { mmdd: '选择月日', showAll: '选择年月日时分', time: '选择时分秒', + hourMinutes: '选择时分', format: '格式化选项', stepMins: '分钟数递增步长设置', filter: '过滤选项', @@ -43,6 +44,7 @@ const DatePickerDemo = () => { mmdd: '選擇月日', showAll: '選擇年月日時分', time: '選擇時分秒', + hourMinutes: '選擇時分', format: '格式化选项', stepMins: '分鐘數遞增步長設置', filter: '過濾選項', @@ -63,6 +65,7 @@ const DatePickerDemo = () => { mmdd: 'Choose Month-Day', showAll: 'Choose DateTime', time: 'Choose Time', + hourMinutes: 'Selective time', format: 'Option Formatter', stepMins: 'Option Steps', filter: 'Option Filter', @@ -88,6 +91,7 @@ const DatePickerDemo = () => { const [desc5, setDesc5] = useState('2020 05 10 10:10') const [desc6, setDesc6] = useState('10:10:00') const [desc7, setDesc7] = useState('2022-05-10 00') + const [desc8, setDesc8] = useState('10:10') const [show1, setShow1] = useState(false) const [show2, setShow2] = useState(false) @@ -96,6 +100,7 @@ const DatePickerDemo = () => { const [show5, setShow5] = useState(false) const [show6, setShow6] = useState(false) const [show7, setShow7] = useState(false) + const [show8, setShow8] = useState(false) const confirm1 = (values: (string | number)[], options: PickerOption[]) => { setDesc1(options.map((option) => option.text).join(' ')) @@ -135,6 +140,10 @@ const DatePickerDemo = () => { setDesc7(options.map((option) => option.text).join(' ')) } + const confirm8 = (values: (string | number)[], options: PickerOption[]) => { + setDesc8(options.map((option) => option.text).join(':')) + } + const filter = (type: string, options: PickerOption[]) => { if (type === 'hour') { return options.filter((option) => Number(option.value) % 6 === 0) @@ -202,42 +211,42 @@ const DatePickerDemo = () => { desc={desc2} onClick={() => setShow2(true)} /> -

{translated.showAll}

setShow3(true)} /> -

{translated.time}

setShow4(true)} /> - +

{translated.hourMinutes}

+ setShow8(true)} + />

{translated.format}

setShow5(true)} /> -

{translated.stepMins}

setShow6(true)} /> -

{translated.filter}

setShow7(true)} /> - {/* 选择日期 */} { onCloseDatePicker={() => setShow4(false)} onConfirmDatePicker={(values, options) => confirm4(values, options)} /> - + {/* 选择时分 */} + setShow8(false)} + onConfirmDatePicker={(values, options) => confirm8(values, options)} + /> {/* 格式化选项 */} { onCloseDatePicker={() => setShow6(false)} onConfirmDatePicker={(values, options) => confirm6(values, options)} /> - {/* 过滤选项 */} { }; export default App; +``` +::: + +### Selective time +:::demo +```tsx +import React, { useState } from "react"; +import { DatePicker,Cell } from '@nutui/nutui-react'; + +const App = () => { + const minDate = new Date(2020, 0, 1) + const maxDate = new Date(2025, 10, 1) + const [show8, setShow8] = useState(false) + const [desc8, setDesc8] = useState('10:10') + const confirm4 = (values:(string|number)[],options:PickerOption[])=>{ + setDesc4(options.map((option) => option.text).join(':')) + } + + return ( + <> + setShow8(true)} /> + setShow8(false)} + onConfirmDatePicker={(values,options) => confirm8(values,options)} + /> + + ); +}; +export default App; + ``` ::: ### Option Formatter @@ -319,7 +354,7 @@ export default App; |---------------------------|---------------------------------------------------|---------|----------| | modelValue | Default Date | Date | `null` | | visible | Is Show | boolean | `false` | -| type | Can be set to date time year-month month-day datehour | string | `date` | +| type | Can be set to date time year-month month-day datehour hour-minutes | string | `date` | | minuteStep | Option minute step | number | `1` | | isShowChinese | Show Chinese | boolean | `false` | | title | Title | string | `null` | diff --git a/src/packages/datepicker/doc.md b/src/packages/datepicker/doc.md index a2c883243b0202757e03a1bb8862ae871040039c..da75980593dc50dec7964d95fbd4f003301aab48 100644 --- a/src/packages/datepicker/doc.md +++ b/src/packages/datepicker/doc.md @@ -148,6 +148,42 @@ export default App; ``` ::: + +### 选择时分 +:::demo +```tsx +import React, { useState } from "react"; +import { DatePicker,Cell } from '@nutui/nutui-react'; + +const App = () => { + const minDate = new Date(2020, 0, 1) + const maxDate = new Date(2025, 10, 1) + const [show8, setShow8] = useState(false) + const [desc8, setDesc8] = useState('10:10') + const confirm4 = (values:(string|number)[],options:PickerOption[])=>{ + setDesc4(options.map((option) => option.text).join(':')) + } + + return ( + <> + setShow8(true)} /> + setShow8(false)} + onConfirmDatePicker={(values,options) => confirm8(values,options)} + /> + + ); +}; +export default App; + +``` +::: + ### 格式化选项 通过传入 formatter 函数，可以对选项文字进行格式化处理。 isShowChinese 属性同样是也为选项后面添加文案，但 formatter 函数的优先级高于 isShowChinese 属性。 @@ -326,7 +362,7 @@ export default App; |---------------------------|---------------------------------------------------|---------|----------| | modelValue | 初始值 | Date | `null` | | visible | 是否可见 | boolean | `false` | -| type | 类时间类型，可选值 date time year-month month-day datehour datetime | string | `date` | +| type | 类时间类型，可选值 date time year-month month-day datehour datetime hour-minutes | string | `date` | | minuteStep | 分钟步进值 | number | `1` | | isShowChinese | 每列是否展示中文 | boolean | `false` | | title | 设置标题 | string | `null` | diff --git a/src/packages/datepicker/doc.taro.md b/src/packages/datepicker/doc.taro.md index 29e54a34d18acf29236d1e1ec7bc6cf97894d85e..cfc8d018dd7fd5d808bfbe61736af8446af2fda6 100644 --- a/src/packages/datepicker/doc.taro.md +++ b/src/packages/datepicker/doc.taro.md @@ -147,6 +147,42 @@ export default App; ``` ::: + +### 选择时分 +:::demo +```tsx +import React, { useState } from "react"; +import { DatePicker,Cell } from '@nutui/nutui-react-taro'; + +const App = () => { + const minDate = new Date(2020, 0, 1) + const maxDate = new Date(2025, 10, 1) + const [show8, setShow8] = useState(false) + const [desc8, setDesc8] = useState('10:10') + const confirm4 = (values:(string|number)[],options:PickerOption[])=>{ + setDesc4(options.map((option) => option.text).join(':')) + } + + return ( + <> + setShow8(true)} /> + setShow8(false)} + onConfirmDatePicker={(values,options) => confirm8(values,options)} + /> + + ); +}; +export default App; + +``` +::: + ### 格式化选项 通过传入 formatter 函数，可以对选项文字进行格式化处理。 isShowChinese 属性同样是也为选项后面添加文案，但 formatter 函数的优先级高于 isShowChinese 属性。 @@ -325,7 +361,7 @@ export default App; |---------------------------|---------------------------------------------------|---------|----------| | modelValue | 初始值 | Date | `null` | | visible | 是否可见 | boolean | `false` | -| type | 类时间类型，可选值 date time year-month month-day datehour datetime | string | `date` | +| type | 类时间类型，可选值 date time year-month month-day datehour datetime hour-minutes | string | `date` | | minuteStep | 分钟步进值 | number | `1` | | isShowChinese | 每列是否展示中文 | boolean | `false` | | title | 设置标题 | string | `null` | diff --git a/src/packages/datepicker/doc.zh-TW.md b/src/packages/datepicker/doc.zh-TW.md index 1f408b45fcc876178b4fbc675a27fb2a31da0ca7..7022abeeddef131d181b9392cb16b7503d6e4986 100644 --- a/src/packages/datepicker/doc.zh-TW.md +++ b/src/packages/datepicker/doc.zh-TW.md @@ -146,6 +146,41 @@ const App = () => { }; export default App; +``` +::: + +### 選擇時分 +:::demo +```tsx +import React, { useState } from "react"; +import { DatePicker,Cell } from '@nutui/nutui-react'; + +const App = () => { + const minDate = new Date(2020, 0, 1) + const maxDate = new Date(2025, 10, 1) + const [show8, setShow8] = useState(false) + const [desc8, setDesc8] = useState('10:10') + const confirm4 = (values:(string|number)[],options:PickerOption[])=>{ + setDesc4(options.map((option) => option.text).join(':')) + } + + return ( + <> + setShow8(true)} /> + setShow8(false)} + onConfirmDatePicker={(values,options) => confirm8(values,options)} + /> + + ); +}; +export default App; + ``` ::: ### 格式化選項 @@ -326,7 +361,7 @@ export default App; |---------------------------|---------------------------------------------------|---------|----------| | modelValue | 初始值 | Date | `null` | | visible | 是否可見 | boolean | `false` | -| type | 類時間類型，可選值 date time year-month month-day datehour datetime | string | `date` | +| type | 類時間類型，可選值 date time year-month month-day datehour datetime hour-minutes | string | `date` | | minuteStep | 分鐘步進值 | number | `1` | | isShowChinese | 每列是否展示中文 | boolean | `false` | | title | 設置標題 | string | `null` | diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx index c0b0fd6bc61417c86e1d3e9cb77f035aaa9739fd..5048324764811f8baa50fd959001d9bc83f1bd67 100644 --- a/src/packages/searchbar/searchbar.taro.tsx +++ b/src/packages/searchbar/searchbar.taro.tsx @@ -133,10 +133,16 @@ export const SearchBar: FunctionComponent< const alignClass = `${align}` + const forceFocus = () => { + const searchSelf: HTMLInputElement | null = searchRef.current + searchSelf && searchSelf.focus() + } + const change = (event: Event) => { const { value } = event.target as any onChange && onChange?.(value, event) setValue(value) + value === '' && forceFocus() } const focus = (event: Event) => { const { value } = event.target as any @@ -154,10 +160,7 @@ export const SearchBar: FunctionComponent< }, [props.value]) useEffect(() => { - if (autoFocus) { - const searchSelf: HTMLInputElement | null = searchRef.current - searchSelf && searchSelf.focus() - } + autoFocus && forceFocus() }, [autoFocus]) const renderField = () => { @@ -269,6 +272,7 @@ export const SearchBar: FunctionComponent< } setValue('') onClear && onClear(event) + forceFocus() } const renderRightLabel = () => { diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx index cc494c811e7d8197df6a0f6ea712d982ebeb631b..7aa36f64addf30fba3bf930aa815a8b926d43a84 100644 --- a/src/packages/searchbar/searchbar.tsx +++ b/src/packages/searchbar/searchbar.tsx @@ -132,6 +132,11 @@ export const SearchBar: FunctionComponent< const alignClass = `${align}` + const forceFocus = () => { + const searchSelf: HTMLInputElement | null = searchRef.current + searchSelf && searchSelf.focus() + } + const change = (event: Event) => { const { value } = event.target as any onChange && onChange?.(value, event) @@ -153,10 +158,7 @@ export const SearchBar: FunctionComponent< }, [props.value]) useEffect(() => { - if (autoFocus) { - const searchSelf: HTMLInputElement | null = searchRef.current - searchSelf && searchSelf.focus() - } + autoFocus && forceFocus() }, [autoFocus]) const renderField = () => { @@ -268,6 +270,7 @@ export const SearchBar: FunctionComponent< } setValue('') onClear && onClear(event) + forceFocus() } const renderRightLabel = () => { diff --git a/src/packages/table/demo.taro.tsx b/src/packages/table/demo.taro.tsx index 0ba240791bc38f5959fdd71f409a40ecb2c48581..f6c57aef8e396c5d7643454339a55e0b91cc698b 100644 --- a/src/packages/table/demo.taro.tsx +++ b/src/packages/table/demo.taro.tsx @@ -4,6 +4,7 @@ import { Dongdong, TriangleDown } from '@nutui/icons-react-taro' import { useTranslate } from '@/sites/assets/locale/taro' import { Button, Toast, Table } from '@/packages/nutui.react.taro' import Header from '@/sites/components/header' +import Taro from '@tarojs/taro' interface T { basic: string @@ -17,6 +18,7 @@ interface T { asynchronousRendering: string sorting: string sorterIcon: string + hideHeader: string } interface TableColumnProps { @@ -35,6 +37,7 @@ const TableDemo = () => { summaryTitle: '显示总结栏', summary: '这是总结栏', striped: '条纹、明暗交替', + hideHeader: '隐藏表头', noDataTitle: '无数据默认展示，支持自定义', customNoData: '这里是自定义展示', customCell: '自定义单元格', @@ -48,6 +51,7 @@ const TableDemo = () => { summaryTitle: 'Show summary bar', summary: 'This is the summary column', striped: 'Stripes, alternating light and shade', + hideHeader: 'Hide table header', noDataTitle: 'No data is displayed by default, and customization is supported', customNoData: 'Here is the custom display', @@ -279,6 +283,13 @@ const TableDemo = () => { style={{ background: '#fff' }} striped /> +

{translated.hideHeader}

+

{translated.noDataTitle}

{ @@ -28,6 +29,7 @@ const TableDemo = () => { summaryTitle: '显示总结栏', summary: '这是总结栏', striped: '条纹、明暗交替', + hideHeader: '隐藏表头', noDataTitle: '无数据默认展示，支持自定义', customNoData: '这里是自定义展示', customCell: '自定义单元格', @@ -41,6 +43,7 @@ const TableDemo = () => { summaryTitle: 'Show summary bar', summary: 'This is the summary column', striped: 'Stripes, alternating light and shade', + hideHeader: 'Hide table header', noDataTitle: 'No data is displayed by default, and customization is supported', customNoData: 'Here is the custom display', @@ -252,6 +255,13 @@ const TableDemo = () => { style={{ background: '#fff' }} striped /> +

{translated.hideHeader}

+

{translated.noDataTitle}

number) | boolean | string + render?: (rowData?: any, rowIndex?: number) => string | React.ReactNode +} + +const App = () => { + const [columns1, setColumns1] = useState([ + { + title: '姓名', + key: 'name', + }, + { + title: '性别', + key: 'sex', + render: (record: any) => { + return ( + + {record.sex} + + ) + }, + }, + { + title: '学历', + key: 'record', + }, + ]) + + const [data1, setData1] = useState([ + { + name: 'Tom', + sex: '男', + record: '小学', + }, + { + name: 'Lucy', + sex: '女', + record: '本科', + }, + { + name: 'Jack', + sex: '男', + record: '高中', + }, + ]) + + return
; +}; +export default App; +``` +::: + ### No data is displayed by default, and customization is supported :::demo ```tsx @@ -594,6 +659,7 @@ export default App; | data | Table data | Object[] | `[]` | | summary | Show profile | ReactNode | - | | striped | Whether the stripes alternate light and dark | boolean | `false` | +| showHeader`v1.5.0` | Show Header | boolean | `true` | | noData | Custom noData | ReactNode | - | | sorterIcon`v1.5.0` | Sort icon | ReactNode | `` | diff --git a/src/packages/table/doc.md b/src/packages/table/doc.md index a1b9830b0f5554a5b9a147286562b9d7d3da0df1..17d33fabdd953f91dc3035952879aa46f56ac342 100644 --- a/src/packages/table/doc.md +++ b/src/packages/table/doc.md @@ -265,6 +265,71 @@ export default App; ``` ::: +### 隐藏表头 +:::demo +```tsx +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 +} + +const App = () => { + const [columns1, setColumns1] = useState>([ + { + title: '姓名', + key: 'name', + }, + { + title: '性别', + key: 'sex', + render: (record: any) => { + return ( + + {record.sex} + + ) + }, + }, + { + title: '学历', + key: 'record', + }, + ]) + + const [data1, setData1] = useState([ + { + name: 'Tom', + sex: '男', + record: '小学', + }, + { + name: 'Lucy', + sex: '女', + record: '本科', + }, + { + name: 'Jack', + sex: '男', + record: '高中', + }, + ]) + + return
; +}; +export default App; +``` +::: + ### 无数据默认展示，支持自定义 :::demo ```tsx @@ -604,6 +669,7 @@ export default App; | data | 表格数据 | Object[] | `[]` | | summary | 是否显示简介 | ReactNode | - | | striped | 条纹是否明暗交替 | boolean | `false` | +| showHeader`v1.5.0` | 是否显示表头 | boolean | `true` | | noData | 自定义无数据 | ReactNode | - | ### TableColumnProps diff --git a/src/packages/table/doc.taro.md b/src/packages/table/doc.taro.md index 8348316ba517331d6e53d3e598198d117cbdf9ce..659c3726e659fdc6a013fd8b7d51bca52aba640a 100644 --- a/src/packages/table/doc.taro.md +++ b/src/packages/table/doc.taro.md @@ -264,6 +264,71 @@ export default App; ``` ::: +### 隐藏表头 +:::demo +```tsx +import React, { useState } from "react"; +import { Table } from '@nutui/nutui-react-taro'; + +interface TableColumnProps { + key?: string + title?: string + align?: string + sorter?: ((a: any, b: any) => number) | boolean | string + render?: (rowData?: any, rowIndex?: number) => string | React.ReactNode +} + +const App = () => { + const [columns1, setColumns1] = useState>([ + { + title: '姓名', + key: 'name', + }, + { + title: '性别', + key: 'sex', + render: (record: any) => { + return ( + + {record.sex} + + ) + }, + }, + { + title: '学历', + key: 'record', + }, + ]) + + const [data1, setData1] = useState([ + { + name: 'Tom', + sex: '男', + record: '小学', + }, + { + name: 'Lucy', + sex: '女', + record: '本科', + }, + { + name: 'Jack', + sex: '男', + record: '高中', + }, + ]) + + return
; +}; +export default App; +``` +::: + ### 无数据默认展示，支持自定义 :::demo ```tsx @@ -603,6 +668,7 @@ export default App; | data | 表格数据 | Object[] | `[]` | | summary | 是否显示简介 | ReactNode | - | | striped | 条纹是否明暗交替 | boolean | false | +| showHeader`v1.5.0` | 是否显示表头 | boolean | `true` | | noData | 自定义无数据 | ReactNode | - | ### TableColumnProps diff --git a/src/packages/table/table.taro.tsx b/src/packages/table/table.taro.tsx index b8135303d9b835b90dc832a03293f3bf0d58d9a5..e47304b5b2207328df1b684e39d0359361efcbb0 100644 --- a/src/packages/table/table.taro.tsx +++ b/src/packages/table/table.taro.tsx @@ -18,6 +18,7 @@ const defaultProps = { striped: false, noData: '无数据', sorterIcon: null, + showHeader: true, } as TableProps export const Table: FunctionComponent< Partial & React.HTMLAttributes @@ -37,6 +38,7 @@ export const Table: FunctionComponent< noData, sorterIcon, onSorter, + showHeader, ...rest } = { ...defaultProps, @@ -139,9 +141,11 @@ export const Table: FunctionComponent< 'nut-table__main--striped': striped, })} > -
-
{renderHeadCells()}
-
+ {showHeader && ( +
+
{renderHeadCells()}
+
+ )}
{renderBoyTrs()}
{summary && ( diff --git a/src/packages/table/table.tsx b/src/packages/table/table.tsx index c2afdb347950736f927953e11e8419e156bc5dbe..857aa0dd181f438946316bca2a45916a98c2e382 100644 --- a/src/packages/table/table.tsx +++ b/src/packages/table/table.tsx @@ -18,6 +18,7 @@ const defaultProps = { striped: false, noData: '无数据', sorterIcon: null, + showHeader: true, } as TableProps export const Table: FunctionComponent< Partial & React.HTMLAttributes @@ -37,6 +38,7 @@ export const Table: FunctionComponent< noData, onSorter, sorterIcon, + showHeader, ...rest } = { ...defaultProps, @@ -140,9 +142,11 @@ export const Table: FunctionComponent< 'nut-table__main--striped': striped, })} > -
-
{renderHeadCells()}
-
+ {showHeader && ( +
+
{renderHeadCells()}
+
+ )}
{renderBoyTrs()}
{summary && ( diff --git a/src/packages/table/types.ts b/src/packages/table/types.ts index 03d8dafd1479743f158d5d3811cf327e1de4ae0d..daf44d9fdfb185cc7bf888b599e5868dea62a0d5 100644 --- a/src/packages/table/types.ts +++ b/src/packages/table/types.ts @@ -12,6 +12,7 @@ export interface BasicTableProps extends BasicComponent { noData?: React.ReactNode sorterIcon?: React.ReactNode onSorter?: (item: TableColumnProps, data: Array) => void + showHeader?: boolean } export interface TableColumnProps {