Fusion Design组件编写表格例子

 

 

import React from 'react';
import ReactDOM from 'react-dom';

import { Tab, Table, Button, Dialog, Form , Input, Checkbox} from '@alifd/next';
import '@alifd/next/dist/next.css';
import data from './data';

console.log(data)
const tabs = [
   { tab: '全部', key: 'all' },
   { tab: '审核中', key: 'review' },
   { tab: '已发布', key: 'released' },
   { tab: '已拒绝', key: 'rejected' },
 ];

const FormItem = Form.Item;

const formItemLayout = {
   labelCol: {
      fixedSpan: 5
   },
   wrapperCol: {
      span: 8
   }
}
 

class TableTab extends React.Component{


   constructor(props){
      super(props);
      this.state = {
         dataSource: data,
         tabKey: 'all',
         visible: false,
         record: {
            'title':'1',
            'author':'2',
            'date':'3',
            'status':'4'
         }
       };

       this.deleteRecord = this.deleteRecord.bind(this);

   }

   //打开对话框
   onOpen = (item) => {
      //  console.log(item)
      this.setState({
         visible: true
      });
   };

   //关闭对话框
   onClose = ( ) => {
      this.setState({
         visible: false
      });
   };
 
   // tabs的切换
   handleTabStatus = function(key){
      // console.log(key)
      this.setState({
         tabKey: key
      });

   }

   //onRowClick 点击  获取每一行的数据
   getRow(item){
      this.setState({
         record: {
            'title': item.title,
            'author': item.author,
            'date': item.date,
            'status': item.status
         }
      })
   }


 

   //删除
   deleteRecord(item){
      // console.log(typeof item)
      // console.log(item.title)
      // console.log(this.state.dataSource.all.length)
      
      console.log(123)


      //获取属于那个类型
      let type = this.state.tabKey
      
      //删除每一条记录
      for(let i=0;i
            
               { tabs.map( item => 
                     
                        
                        
                        
                         编辑

                        



                           

                              
                                 
                              

                              
                                 
                              

                              
                                 
                              

                              
                                 
                              
                              
                           
                        
                           
 
                          this.deleteRecord(this.state.record)     }  >删除 
                        } dataIndex="id"/>
                        
 
                     
                ) }
            
         

); } } ReactDOM.render( , document.getElementById('root') )