Material-UI （React 使用）

1、根据官方教程安装material-UI 

$ npm install @material-ui/core

2、material UI 中的组件在使用的时候是支持部分引入的，这样不会因为全局引入造成包过大。

 import React from 'react';
  import Button from '@material-ui/core/Button';

  const App = () => (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );

3、material ui 的icon需要单独安装

npm install @material-ui/icons

4、material-table的使用   

     material-table 是一个单独的组件库 ，是material UI中table的一个扩展。主要 属性如下。主要介绍以下几个有巧妙作用的属性。

     actions:  数据类型，可以放object，但是新版本里object 会报错

     columns: 数据的column 设置， 其中 editComponent 可以用来设置编辑时的渲染组件， editable 可以用来设置该列什么时候可以被编辑，lookup 可以用来设置编辑时的下拉选项， sorting 可以设置设置是否可以排序。

     icons:  table 里使用的icon ，需要在这里命名引入，否则icon无法正常使用

     options: table 一些参数的设置，其中 paging  是table是否支持分页（table的这个分页不支持服务端分页），draggable 是否支持拖动分组，

     

     除了一般的 table 的选择、展开，自定义样式等功能，还有一个单独的功能为 editable Table 也就是可编辑 table 。其他的使用比较简单，因此主要说一下这个 可编辑table。

<MaterialTable
    editable={{
        isEditable: rowData => rowData.name === "a", // only name(a) rows would be editable
        isDeletable: rowData => rowData.name === "b", // only name(a) rows would be deletable
         // 添加函数
        onRowAdd: newData => 
            new Promise((resolve, reject) => {  // 这里的promise 会控制做完操作后的loading， 执行 resolve loading结束，操作完成 ；执行 reject ，loading结束，操作失败，该行仍然处于编辑状态
                setTimeout(() => {
                    {
                        /* const data = this.state.data;
                        data.push(newData);
                        this.setState({ data }, () => resolve()); */
                    }
                    resolve();
                }, 1000);
            }),
        // 更新函数
        onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    {
                        /* const data = this.state.data;
                        const index = data.indexOf(oldData);
                        data[index] = newData;                
                        this.setState({ data }, () => resolve()); */
                    }
                    resolve();
                }, 1000);
            }),
        // 删除函数
        onRowDelete: oldData =>
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    {
                        /* let data = this.state.data;
                        const index = data.indexOf(oldData);
                        data.splice(index, 1);
                        this.setState({ data }, () => resolve()); */
                    }
                    resolve();
                }, 1000);
            })
    }}
/>