react-antd-mobile-table

介绍

react-antd-mobile-table 基于 antd-mobile 进行二次封装的表单组件

使用： 表单配置项

export const defaultOptions = {
  header: "",   // 表单头部标题
  submitBtn: true,  // 保存按钮显隐
  submitBtnText: "保存",  // 保存按钮文字
  cancelBtn: true, // 返回按钮显隐
  cancelBtnText: "返回", // 返回按钮文字
  btnSize: "middle",  // 默认按钮大小
  column: [
      {
        label: "input",
        prop: "input",
        rules: [{ required: true, message: '姓名不能为空' }]
      },
      {
        label: "number",
        prop: "number",
        type: "number",
        max: 99
      },
      {
        label: "password",
        prop: "password",
        type: "password"
      },
      {
        label: "select",
        prop: "select",
        type: "select",
        selectList: [
          {
            label: "18",
            value: "18"
          },
          {
            label: "19",
            value: "19"
          },
          {
            label: "20",
            value: "20"
          }
        ]
      },
      {
        label: "date",
        prop: "date",
        type: "date"
      },
      {
        label: "radio",
        prop: "radio",
        type: "radio",
        selectList: "是,否"
      },
      {
        label: "checkbox",
        prop: "checkbox",
        type: "checkbox",
        radioLayout: "inline",
        selectList: [
          {
            label: "足球",
            value: "足球"
          },
          {
            label: "篮球",
            value: "篮球"
          },
          {
            label: "乒乓球",
            value: "乒乓球"
          }
        ]
      },
      {
        label: "rate",
        prop: "rate",
        type: "rate"
      },
      {
        label: "selector",
        prop: "selector",
        type: "selector",
        selectList: "1, 2, 3, 4"
      },
      {
        label: "slider",
        prop: "slider",
        type: "slider"
      },
      {
        label: "Switch",
        prop: "switch",
        type: "switch"
      },
      {
        label: "textarea",
        prop: "textarea",
        type: "textarea"
      },
      {
        label: "subtable",
        prop: "subtable",
        type: "subtable",
        column: [
          {
            label: "input",
            prop: "hello"
          },
          {
            label: "date",
            prop: "date",
            type: "date"
          }
        ]
    }
  ]
}

import { Form } from "react-antd-mobile-table"
// 表单组件基本使用
export default function App() {
  // 初始化数据
  const formData = { input: "", slider: 50, checkbox: ["1"], select: "", date: "", switch: true }
  // form表单实例方法
  const refForm = createRef();
  const [type, setType] = useState("add");
  const [options, setOptions] = useState(defaultOptions);
  // 保存按钮
  const submit = (value) => {
  }

  return (
    <Form formData={formData} ref={refForm} options={options} type={type} submit={submit} />
  )
}

Form组件属性： | key | type | desc | required | | :-------: | :-----: | :---------------------: | :------: | | formData | object | 表单初始值 | true | | options | object | 表单配置项 | true | | type | string | 当前表单类型, add,edit,view | true | | submit | func | 点击保存按钮提交事件 | false | | cancel | func | 点击返回按钮触发事件 | false |

options属性： | key | type | desc | required | | :-------: | :-----: | :---------------------: | :------: | | header | string | 表单头部标题 | false | | submitBtn | boolean | 保存按钮显隐 | false | | submitBtnText | string | 保存按钮文字 | false | | cancelBtn | boolean | 返回按钮显隐 | false | | cancelBtnText | string | 返回按钮文字 | false | | btnSize | string | 默认按钮大小, 'mini' ，'small'，'middle'，'large' | false | | column | Array | 表单配置项 | true |

options中的column属性: | key | type | desc | required | | :-------: | :-----: | :---------------------: | :------: | | label | string | 表单项名字 | false| | prop | string | 表单formData字段名，不可重复 | true| | type | string | 表单项类型：input,number,password,elect,date,radio,checkbox,rate,selector,slider,textarea,subtable | false| | disabled | boolean | 表单项是否禁用 | fasle | | addDisabled | boolean | type为add时有效 | false | | editDisabled | boolean | type为edit时有效 | false | | viewDisabled | boolean | type 为view时有效 | false | | display | boolean | 表单项显隐 | true | | addDisplay | boolean | type为add时有效 | true | | editDisplay | boolean | type为edit时有效 | true | | viewDisplay | boolean | type为view时有效 | true | | selectList| Array, string | 下拉，单选，日期，多选框等下拉项，可参考 antd-mobile相关配置项 | false| | style | object | 表单项相关样式 | false| |radioLayout| string | checkbox,radio配置项，inline,block。默认值：inline (单选框选项) | false | | 其它配置项 | any | 基于antd-mobile封装，可传入相关组件的配置项 | false|

List组件： 列表组件基于 antd-table 的 List、PullToRefresh、SearchBar、InfiniteScroll 进行二次封装的

| key | type | desc | required | | :-------: | :-----: | :---------------------: | :------: | |data | Array | 展示数据列表 | true | |options | object | 属性key索引值，title展示内容，description小标题，header列表头部展示文字，mode卡片模式（default, card） | false | |searchBarOptions| object | 搜索框配置项， 具体参考SearchBar 组件配置 | false | |pullToRefreshOptions| object | 下拉刷新配置，具体参考PullToRefresh组件配置 | false | |listItemOptions| object | 列表项相关配置，具体参考 List.Item 组件配置 | false | |infiniteScrollOptions| object | 上拉加载数据配置，具体参考 InfiniteScroll 组件配置 | false |

// 案例
import React, { createRef, useState } from "react";
import { List, ActionSheet } from "react-antd-mobile-table";

// 模拟请求数据
const getRandomData = () => {
  const list = Array.from({ length: 30 }).map((item, index) => ({ id: index + 1 + Math.random(), name: index + "_hello", desc: "world_" + index }))

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(list)
    }, 2000)
  })
}

const actions = [
  { text: '复制', key: 'copy' },
  { text: '修改', key: 'edit' },
  { text: '保存', key: 'save' },
];

export default () => {
  // 数据列表
  const [list, setList] = useState([]);
  const listRef = createRef();

  const [row, setRow] = useState({});
  const actionSheetRef = createRef();

  const options = {
    key: "id",        // 数据遍历 索引
    title: "name",    // 展示标题字段
    description: "desc",  // 展示描述字段
    header: "标题内容",  // list 标题
    mode: "default"   // 默认和卡片两种模式  default | card
  };

  // 搜索框配置
  const searchBarOptions = {
    onSearch: (value) => {
      console.log(value, "___value___", list);
    }
  };

  // list 选项配置
  const listItemOptions = {
    onClick: (e, item) => {
      setRow(item);
      actionSheetRef.current.setVisible(true);
    }
  };

  // 上拉加载数据配置
  const infiniteScrollOptions = {
    loadMore: async () => {
      const res = await getRandomData();
      if (list.length < 100) {
        setList([...list, ...res])
      } else {
        listRef.current.setHasMore(false)
      }
    }
  }

  const onAction = (action, close, row) => {
    close();
  }

  return (
    <>
      <List
        ref={listRef}
        data={list}
        options={options}
        searchBarOptions={searchBarOptions}
        listItemOptions={listItemOptions}
        infiniteScrollOptions={infiniteScrollOptions}
      />
      <ActionSheet row={row} onAction={onAction} actions={actions} ref={actionSheetRef}></ActionSheet>
    </>
  )
}