---
title: 可编辑表格
order: 1
docGenIncludes:
  - src/components/YwFormTable/index.tsx
---



```jsx

import React, { useEffect,useRef,useState } from 'react';
import ReactDOM from 'react-dom';
import { YwFormTable,YwButton } from '@ywfe/yw-design';
import 'antd/dist/antd.css';


const dataSource = [
  {
    id: 1,
    title: '123',
    count: 3,
    unitAmount: '13.00',
    minNumber: 2,
    maxNumber: 3,
  },
  {
    id: 2,
    title: '123',
    count: 5,
    unitAmount: '16.00',
    minNumber: 4,
    maxNumber: 7,
  },
];
const App = () => { 
    const formTableRef = useRef(); // tableRef.current
 
    const buttons = [
        {
            type: 'batch',
            btnText: '批量删除',
            onClick: (keys,record,reload)=>{
                formTableRef?.current?.remove(keys)
                reload();
            },
        },
        {
            type: 'action',
            btnText: '添加商品',
            btnType:'primary',
            onClick: ()=>{
                formTableRef?.current?.push([{
                    id: 3,
                    title: '123',
                    count: 5,
                    unitAmount: '16.00',
                    minNumber: 4,
                    maxNumber: 7,
                }])
            }
        },
    ];
const columns = [
  {
    title: '商品信息',
    dataIndex: 'info',
    component: 'DetailInfo',
    componentProps: {
      type: 'goods', // 商品类型 后面还会补充其他类型
    },
    width: 300,
    formatValues: (_, record) => {
      return {
        imgUrl:
          'https://daichongtest.oss-cn-hangzhou.aliyuncs.com/goods/config/2022/07/0e363d69-5988-4325-96d2-4eda40daa90b.jpg',
        price: ['23.00', '11111.00'], // price:'23.00',
        title: {
          value: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
          tooltip: true,
          onClick: () => {},
        },
        tooltip: {
          label: '商品ID',
          value: '34234324324234',
          isCopy: true,
        },
        tags: [
          { color: '#EF813E', bizName: 'amount', value: ['佣金', '18.00%'] },
          { value: '零售', visible: true },
          { value: '正价' },
        ],
        items: [
          {
            label: '规格',
            value: '34234324324234',
            row: 1,
            isCopy: true,
            onClick: () => {},
          },
          {
            label: '',
            tooltip: true,
            value: '黑色S 仅100件',
          },
        ],
      };
    },
  },
  {
    title: '采购数量',
    dataIndex: 'count',
    component: 'YwJsonForm',
    width: 120,
    componentProps: {
      component: 'NumberPicker',
      required: true,
    },
  },
  {
    title: '采购单价',
    dataIndex: 'unitAmount',
    component: 'YwJsonForm',
    width: 120,
    componentProps: {
      component: 'NumberPicker',
      required: true,
      props:{
        addonBefore:'￥'
      },
    },
  },
  {
    title: '总价',
    dataIndex: 'totalAmount',
    component: 'YwJsonForm',
    width: 120,
    componentProps: {
      component: 'PreviewText.Input',
      disabled: true,
      componentProps: {
        prefix: '￥',
      },
      reactions: {
        dependencies: ['.unitAmount', '.count'],
        fulfill: {
          state: {
            value: '{{$deps[0] * $deps[1]}}',
          },
        },
      },
    },
  },
  {
    title: '操作',
    component: 'Operates',
    dataIndex: 'operate',
    fixed: 'right',
    componentProps: {
      value: [
        {
          btnText: '删除',
          onClick: (data, record, index) => {
            formTableRef?.current?.remove([record.id]);
          },
        },
      ],
    },
    width: 260,
  },
];

    const [total, setTotal] = useState('-')
    useEffect(()=>{
        // 监听指定列值的变化 props: 字段名 callback
        formTableRef?.current?.onColumnValueChange('count',(value)=>{
            const _total = value.reduce((curr,prev)=>curr+prev,0)
            setTotal(_total)
        });
        // 监听指定行的变化，props: index callback
        formTableRef?.current?.onRowValueChange(1,(value)=>{})
    },[])
    return  <YwFormTable  
                ref={formTableRef} 
                columns={columns}
                initialValue={dataSource}
                buttons={buttons} 
                onSubmit={(values)=>{
                    console.log(values)
                }}
                footer={
                    <div>合计：采购数量 {total}  
                        <YwButton type='primary' btnText='提交' style={{ marginLeft: '10px' }} onClick = {()=>{
                            formTableRef?.current.submit().then(values=>{
                                console.log(values)
                            })
                        }}/>
                    </div>}
                rowSelection={{}}
            />
}
ReactDOM.render(<App />, mountNode);
```