umi+dva+antd后台管理系统(7)---table表格的增删

oho~，这两天有事，今天继续写啦！先来个删除把，比较简单的稳一下心情。

1. 删除

1、首先还是一样的，先定义一个请求~

// 删除所选商品
export const Dele=(id)=>{
  return instance.POST("/api/crud",id)
}

2、然后定义model发起请求的方法delete~

export default {
  namespace: 'products',
  state: {
    products: [],
    loading: false,
  },
  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload, loading: false };
    },
    showLoading(state, action) {
      return { ...state, loading: true };
    },
  },
  effects: {
    *loadData({ payload }, { call, put }) {
      console.log("haha")
      yield put({ type: 'showLoading' });
      const result = yield call(list);
      console.log(result)
      yield put({
        type: 'save',
        payload: {
          products: result.data,
        },
      });
    },
    //关键的在这里！！！！！！！！！！！！！
    *delete({payload},{call,put}){
      const result=yield call(Dele,payload)
      console.log(result)
      yield put({
      type: 'loadData'
    })
    }
  },
};

3、最后在页面调用发起请求就阔以啦~

 function onDelete(e) {
      console.log(e);
      if (isLogined()) {
        console.log(e);
        dispatch({
          type: 'products/delete',
          payload: {
            id: e,
          },
        });
        message.success('Click on Yes');
      }
    }


<span>
	<Popconfirm title="Delete?" onConfirm={() => onDelete(record._id)}>
		<Button type="danger">删除</Button>
	</Popconfirm>
</span>

是不是超级简单~~~，so easy~

2. 添加

增加好简单啊，就是获取表单的值，调接口增加商品就完事了，这里就不详说了，可以看下一篇的修改怎么写的，略微改改就增加成功了，感兴趣的话可以看看源码