---
title: 通用表格组件
date: 2021-02-03 09:26:32
permalink: /pages/1ab4ce/
---
# 通用表格组件

## 普通表格

普通表格，仅传入数据显示

***

<ClientOnly><Web-Table></Web-Table></ClientOnly>

::: details 代码块

***ts版本***

``` vue
<template>
  <div>
    <table-head-co
      ref="tableCo"
      :form-list="tableList"
      :table-heads="tableHead"
      :width="200"
      :cellAlign="center"
    />
  </div>
</template>
<script>
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'commonExample',
  components: {
    tableHeadCo,
  }
})
export default class extends Vue {
    tableHead:any[] = [
      { fieldName: 'date', nameCn: '日期', isHead: 1 },
      { fieldName: 'name', nameCn: '姓名', isHead: 1 },
      { fieldName: 'address', nameCn: '地址', isHead: 1 },
    ]
    tableList:any[] = [{
            date: '2016-05-02',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-04',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-01',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-03',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }]
}
</script>
<style scoped>

</style>

```

***js版本***

``` vue
<template>
  <div>
    <table-head-co
      ref="tableCo"
      :form-list="tableList"
      :table-heads="tableHead"
      :width="200"
      :cellAlign="center"
    />
  </div>
</template>
<script>
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'

export default {
  components: {
    tableHeadCo
  },
  data(){
    return {
      tableHead: [
      { fieldName: 'date', nameCn: '日期', isHead: 1 },
      { fieldName: 'name', nameCn: '姓名', isHead: 1 },
      { fieldName: 'address', nameCn: '地址', isHead: 1 },
    ],
    tableList: [{
            date: '2016-05-02',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-04',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-01',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-03',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }]
    }
  }
}
</script>
<style scoped>

</style>
```

:::

## 带复选框的表格

带复选框的表格，提供复选框回调函数，点击复选框时可打开控制台查看打印内容。

***

<ClientOnly><Web-TableCheckBox></Web-TableCheckBox></ClientOnly>

::: details 代码块

***ts版本***

``` vue
<template>
  <div>
    <table-head-co
      ref="tableCo"
      :form-list="tableList"
      :table-heads="tableHead"
      :width="200"
      :check-box-visible="true"
      @handle-selection-change="handleSelectionChange"
    />
  </div>
</template>
<script>
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'commonExample',
  components: {
    tableHeadCo,
  }
})
export default class extends Vue {
    tableHead:any[] = [
      { fieldName: 'date', nameCn: '日期', isHead: 1 },
      { fieldName: 'name', nameCn: '姓名', isHead: 1 },
      { fieldName: 'address', nameCn: '地址', isHead: 1 },
    ]

    tableList:any[] = [{
            date: '2016-05-02',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-04',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-01',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-03',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }]

    // 复选框监听事件
    handleSelectionChange(val){
      console.log(val)
    }
}
</script>
<style scoped>

</style>

```

***js版本***

``` vue
<template>
  <div>
    <table-head-co
      ref="tableCo"
      :form-list="tableList"
      :table-heads="tableHead"
      :width="200"
      :check-box-visible="true"
      @handle-selection-change="handleSelectionChange"
    />
  </div>
</template>
<script>
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'

export default {
  components: {
    tableHeadCo
  },
  data(){
    return {
      tableHead: [
      { fieldName: 'date', nameCn: '日期', isHead: 1 },
      { fieldName: 'name', nameCn: '姓名', isHead: 1 },
      { fieldName: 'address', nameCn: '地址', isHead: 1 },
    ],
    tableList: [{
            date: '2016-05-02',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-04',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-01',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-03',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }]
    }
  },
  methods:{
    // 复选框改变监听事件
    handleSelectionChange(val){
      console.log(val)
    }
  }
}
</script>
<style scoped>

</style>

```

:::

## 带插槽的表格

表格组件提供插槽功能，可以将插槽设置成按钮等其他功能，点击编辑按钮可以查看控制台打印内容。

***

<ClientOnly><Web-TableSlot></Web-TableSlot></ClientOnly>

::: details 代码块

***ts版本***

``` vue
<template>
  <div>
    <table-head-co
      ref="tableCo"
      :form-list="tableList"
      :table-heads="tableHead"
      :width="200"
      :slot-visible="true"
    >
      <template
        v-slot="scope"
      >
        <el-button
          size="mini"
          @click="showEdit(scope.item.row)"
        >
          编辑
        </el-button>
      </template>
    </table-head-co>
  </div>
</template>
<script>
import tableHeadCo from '../Co/tableHeadCo'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'commonExample',
  components: {
    tableHeadCo,
  }
})
export default class extends Vue {
    tableHead:any[] = [
      { fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120 },
      { fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100 },
      { fieldName: 'address', nameCn: '地址', isHead: 1 },
    ]
    tableList:any[] = [{
            date: '2016-05-02',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-04',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-01',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-03',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }]

    // 点击事件
    showEdit(val){
      console.log(val)
    }
}
</script>
<style scoped>

</style>
```

***js版本***

``` vue
<template>
  <div>
    <table-head-co
      ref="tableCo"
      :form-list="tableList"
      :table-heads="tableHead"
      :width="200"
      :slot-visible="true"
    >
      <template
        v-slot="scope"
      >
        <el-button
          size="mini"
          @click="showEdit(scope.item.row)"
        >
          编辑
        </el-button>
      </template>
    </table-head-co>
  </div>
</template>
<script>
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'

export default {
  components: {
    tableHeadCo
  },
  data(){
    return {
      tableHead: [
      { fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120  },
      { fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100  },
      { fieldName: 'address', nameCn: '地址', isHead: 1 },
    ],
    tableList: [{
            date: '2016-05-02',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-04',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-01',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }, {
            date: '2016-05-03',
            name: '小明',
            address: '北京市海淀区中关村南四街'
          }]
    }
  },
  methods:{
    showEdit(val){
      console.log(val)
    }
  }
}
</script>
<style scoped>

</style>
```

:::

## Table Attributes

&nbsp; 
&nbsp; 

| 参数  | 说明 | 类型 | 可选值 | 默认值
| :---| :---- | :---- |:---- |:---- |
| check-box-visible | 是否显示复选框 | Boolean |-|false|
| table-heads | 表头 | Array |-|-|
| form-list | 需要显示的数据 | Array |-|-|
| loading | 表格加载动画 | Boolean |-|false|
| formatter | 格式化表格数据 | Function(row, column, cellValue, index) |-|-|
| cellAlign | 表格对齐方式 | String | left/center/right | center |
| slotVisible | 是否显示操作列 | Boolean |-|false|
| width | 操作列的宽度 | Number |-|200|

## Table Events

&nbsp; 
&nbsp; 

| 事件名  | 说明 | 参数 |
| :---| :---- | :---- |
| handle-selection-change | 当用户手动勾选数据行的 Checkbox 时触发的事件 | row |
| handle-sort-change | 当表格的排序条件发生变化的时候会触发该事件 | column |

## Table Slot

&nbsp; 
&nbsp; 
| name  | 说明 |
| :---| :---- |
| - | 用于放置在操作列上的按钮等元素，需要从scope.item中获取当前行的值 |

## Table Header style

&nbsp; 
&nbsp; 
| name  | 说明 |
| :---| :---- |
| header-cell-style | 用于设置表头样式 |
