SOURCE

# BaseTable 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作

## 基础用法

:::demo

```vue
<template>
   <BaseTable :columns="fields" :data="tableData" show-header 
   :defaultSort="defaultSort"
   v-model:radio="radio"
   v-model:checkbox="checkbox"
   @sortChange="sortChange"
   @radioChange="radioChange"
   @selectionChange="selectionChange"
   @selectAll="selectAll" />
</template>

<script>
import { defineComponent,ref } from 'vue'
export default defineComponent({
  setup() {  
    const radio = ref('3')
    const checkbox = ref(['1','2','4'])
    const defaultSort = ref({ prop: 'address', order: 'descending' })
    const fields = ref([{
      type: 'checkbox',
      fixed: 'left',
      width: 40,
      disabled: (scope, column)=>{
        return scope.row.id==='2'
      }
    },{
      label: '列date列date列date列date列列date列date列date列date列列date列date列date列date列列date列date列date列date列',
      field: 'date',
      width: "80px",
      fixed: 'left'
    }, {
      label: '列Address',
      field: 'address2',
      children:[{
         label: '列name',
      field: 'name'
      },{
         label: '列列name列name列name列name列name列name列name列name列namename',
      field: 'name2',
      width: "320px",
      description: 'ddddddddddddddddddddddddaaaaaaa1111111111111111111',
      sortable: 'custom'
      }]
    }, {
      label: '列name',
      field: 'name'
    }, {
      label: '列address',
      field: 'address',
      sortable: 'custom' 
    }, {
      label: '列zip列zip列zip列zip列zip列zip列zip列zip列zip列zip列zip列zip列zip列zip',
      field: 'zip',
      width: "120px",
      fixed: 'right'
    }])  
    const tableData = ref([{
        id: '1',
        date: '列date列date列date列date列列date列date列date列date列列date列date列date列date列列date列date列date列date列',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        zip: 'CA 90036',
      }, {
        id: '2',
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    }, {
        id: '3',
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    }])

    const sortChange = (e)=>{
      console.error(e)
    }


    const radioChange = (e)=>{
      console.error('radioChange',e)
    }

    const selectionChange = (e)=>{
      console.error('selectionChange',e)
    }

    const selectAll = (e)=>{
      console.error('selectAll',e)
    }

    return {radio,checkbox, defaultSort, fields,tableData, sortChange ,radioChange,selectionChange, selectAll}
  }
})
</script>
```

:::

## 组件 API

| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
| :-- | :-- | :-- | :-- |:-- |
| xxx | xxx | string | -- | / |
| xxx | xxx | Array<[xxx](#xxx-属性)> | -- | [] |

## xxx 属性

| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
| :-- | :-- | :-- | :-- |:-- |
| xxx | xxx（必传项） | string | -- |  |

## 组件 插槽

| 属性名 | 说明 | 子标签 |
| :-- | :-- | :-- |
| default | 默认内容 | -- |
| item | 自定义子项内容 | -- |

## 组件 方法

## 组件 事件

## 组件 对外暴露的变量

## 组件 对外暴露的方法