# Table 表格的使用
<div class="demo-block">
  <w-table :that='that'
          size='mini'
          :isRowStyle = 'true'
          :isSelection='false'
          :isPagination='true'
          :isHandle='false'
          :isIndex ='false'
          :isStripe='false'
          :isHighlight='false'
          :isBorder ='true'
          :tableData='tableData'
          :tableCols='tableCols'
          :tablePage='tablePage'
          @refresh="refreshPage"
          @select ="selectTable"></w-table>

<script>
export default {
    name:"Wtable",
    data() {
      return {
        that: this,
        tableData: [
          {carPlate: '',
            createDateTime: '2020-04-29T16:00:42',
            operatorDateTime:"2020-04-29T16:00:42",
            currentGuardLevel: 1,
            detils: '故障时间:2020-04-29 16:00:41  设备:多社区西墨2-1栋-2单元门禁设备  编号:V1949374554',
            gateId: 'V1949374554',
            id: '4567',
            operatorId:"刘",
            parkId: '123',
            remark: null,
            showLevel: 1,
            status: 'CRETE',
            type: 'ACCESS_EQUIPMENT_OFFLINE',
            upReportTimeLine: null
          }
        ],
        tableCols: [
          {label: '事件状态',
            itemStyle: (row) => {
              /// return 'color:' + (row.status === 'CRETE' ? '#f56c6c' : (row.status === 'LOADING' ? '#e5e814' : (row.status === 'COMPLETE' ? '#c0c4cc' : '')))
            },
            prop: 'status',
            width: '100px',
            },
          {label: '创建时间', prop: 'createDateTime', width: '150px', },
          {label: '事件类型', prop: 'type', width: '120px', },
          {label: '社区',
            prop: 'carPlate',
            width: '150px',
            formatter: row => {
              if (!row.carPlate) {
                return '云智社区用户'
              }
            }},
          {label: '操作人', isShow: 'show', prop: 'operatorId', width: '120px'},
          {label: '操作时间', isShow: 'show', prop: 'operatorDateTime', width: '150px', },
          {label: '备注', isShow: this.tableHeadShowRemark, prop: 'remark', width: '120px'},
          {label: '次数', prop: 'currentGuardLevel', width: '50px'},
          {label: '详情', prop: 'detils'},
          {label: '操作',
            type: 'button',
            width: '200px',
            btnList: [
              {type: 'primary',
                label: '受理',
                handle: (that, row) =>{
                  console.log(row)
                }
              },
              {type: 'success',
                label: '完成',
                handle: (that, row) =>{
                  console.log(row)
                },
                disabled: row => {
                  if (row.status === 'COMPLETE') {
                    return true
                  } else {
                    return false
                  }
                },
                }
            ]}
        ],
        tablePage: {
          pageSize: 10,
          total: 1,
          pageNum: 1
        },
      }
    },
    methods: {
      refreshPage() {
        console.log()
      },
      selectTable(){

      },
    }

}
</script>
</div>

::: demo
```html
  <w-table :that='that'
          size='mini'
          :is-rowstyle = 'true'
          :is-selection='false'
          :is-pagination='true'
          :is-handle='false'
          :is-index ='false'
          :is-stripe='false'
          :is-highlight='false'
          :is-border ='true'
          :table-data='tableData'
          :tablec-ols='tableCols'
          :table-page='tablePage'
          @refresh="refreshPage"
          @select ="selectTable"></w-table>

<script>
export default {
    name:"Wtable",
    data() {
      return {
        that: this,
        tableData: [
          {carPlate: '',
            createDateTime: '2020-04-29T16:00:42',
            operatorDateTime:"2020-04-29T16:00:42",
            currentGuardLevel: 1,
            detils: '故障时间:2020-04-29 16:00:41  设备:多社区西墨2-1栋-2单元门禁设备  编号:V1949374554',
            gateId: 'V1949374554',
            id: '4567',
            operatorId:"刘",
            parkId: '123',
            remark: null,
            showLevel: 1,
            status: 'CRETE',
            type: 'ACCESS_EQUIPMENT_OFFLINE',
            upReportTimeLine: null
          }
        ],
        tableCols: [
          {label: '事件状态',
            itemStyle: (row) => {
              /// return 'color:' + (row.status === 'CRETE' ? '#f56c6c' : (row.status === 'LOADING' ? '#e5e814' : (row.status === 'COMPLETE' ? '#c0c4cc' : '')))
            },
            prop: 'status',
            width: '100px',
            },
          {label: '创建时间', prop: 'createDateTime', width: '150px', },
          {label: '事件类型', prop: 'type', width: '120px', },
          {label: '社区',
            prop: 'carPlate',
            width: '150px',
            formatter: row => {
              if (!row.carPlate) {
                return '云智社区用户'
              }
            }},
          {label: '操作人', isShow: 'show', prop: 'operatorId', width: '120px'},
          {label: '操作时间', isShow: 'show', prop: 'operatorDateTime', width: '150px', },
          {label: '备注', isShow: this.tableHeadShowRemark, prop: 'remark', width: '120px'},
          {label: '次数', prop: 'currentGuardLevel', width: '50px'},
          {label: '详情', prop: 'detils'},
          {label: '操作',
            type: 'button',
            width: '200px',
            btnList: [
              {type: 'primary',
                label: '受理',
                handle: (that, row) =>{
                  console.log(row)
                }
              },
              {type: 'success',
                label: '完成',
                handle: (that, row) =>{
                  console.log(row)
                },
                disabled: row => {
                  if (row.status === 'COMPLETE') {
                    return true
                  } else {
                    return false
                  }
                },
                }
            ]}
        ],
        tablePage: {
          pageSize: 10,
          total: 1,
          pageNum: 1
        },
      }
    },
    methods: {
      refreshPage() {
        console.log()
      },
      selectTable(){

      },
    }

}
</script>

```
:::

### Attributes and event
| 参数      | 说明                                 | 类型      | 可选值       | 默认值   |
|---------- |------------------------------------ |---------- |------------- |-------- |
|tableData  |	table 表格渲染的数据                 |	array   |	—           |	—       |
|tableCols	 | table v-for 渲染每一行的数据         |	array    |	—          |	—        |
|tableCols label |	绑定的文字                         |	string    |	—             |	—      |
|tableCols isShow   |	是否可展示                           |	boolean   |	—	            | true   |
|tableCols prop     |	绑定的地段                         |	string  |	—            |	true  |
|tableCols width	| 列宽                    |	string   |	120px          |	—     |
|tableCols type  |	template 内容类型                        |	string  	| —   html、text、button   |	  |
|tableCols btnList  |	顾名思义btn数组                        |	array  	| —      |	  |
|tableCols btnList type |	template内按钮的类型                        |	string  	|   primary    |	  |
|tableCols btnList label |	template内按钮字体                       |	string  	|       |	  |
|tableCols btnList handle |	template内按钮点击触发的函数                       |	function  	|       |	  |
|tableCols btnList disabled |	template内按钮是否禁止点击                       |function () { if ( row.status === 'COMPLETE') { return true } else {  return false}  	|       |	  |
|tableCols formatter |	同element的用法                       |	function ( row ) { console.log ( row ) }  	|       |	     |
|tableCols align     |	同element align的用法                       |	string 	|   left、center、right    |	     |