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