react-antd-mobile-table

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>
    </>
  )
}