# CommonTable 表格模块

### 基础用法

:::demo
```vue
<template>
  <common-table
    height="300"
    :table-header="tableHeader"
    :table-data="tableData"
  ></common-table>
</template>
<script setup>
import { ref } from 'vue';


const tableHeader = ref([
  { label: '姓名', name: 'name', width: '100' },
  { label: '年龄', name: 'age', 'min-width': '100' }
])

const tableData = ref([
  {name:'张三', age:12},
  {name:'张三', age:12},
  {name:'张三', age:12},
])

const tableAttrs = ref({})

const highlight = ref(true)


</script>
```
:::


### 进阶用法：
#### 单行选中/多选

  1. 想要使用单行选中功能，需要调用handleCurrentRowChange事件结合highlight进行单行选中功能，如果需要进行单选选中的复选时，需要配合JS方法进行，common-table向外暴露了setSingleCurrent方法，需要传递当前选中的行的row进行选中；注意，如果直接在页面渲染时就调用才方法时，会出现报错，报错原因为html元素未渲染完成，提前对html元素进行了操作，所以需要在onMounted里面进行方法调用；

  2. isCheck 结合 handleSelectionChange方法，实现多选功能，实现此功能时，如果需要对选中文件进行复显时，可以结合js方法setCurrent进行复选
:::demo
```vue
<template>
  <common-table
    ref="tableRef"
    height="300"
    :table-header="tableHeader"
    :table-data="tableData"
    :highlight="highlight"
    is-check
    @handle-current-row-change="handleCurrentRowChange"
    @handle-selection-change="handleSelectionChange"
  ></common-table>
  <el-button @click.stop="handleChange">选中第二行</el-button>
</template>
<script setup>

import { ref,onMounted, getCurrentInstance } from 'vue'
const {proxy} = getCurrentInstance()


const tableHeader = ref([
  { label: '姓名', name: 'name', width: '100' },
  { label: '年龄', name: 'age', 'min-width': '100' }
])

const tableData = ref([
  {name:'张三', age:12},
  {name:'张三', age:12},
  {name:'张三', age:12},
])

const tableAttrs = ref({})

const highlight = ref(true)

// 获取当前变化
function currentChange(data) {
  // console.log(data)
  proxy.$message(`${data.name}${data.age}`)

}

// 
function handleCurrentRowChange(row) {
  console.log(row)

}

function handleSelectionChange(rows) {
    console.log(rows)
}

const tableRef = ref(null)

function handleChange() {
  tableRef.value.setSingleCurrent(tableData.value[2])
}
onMounted(()=> {
  // 复显单行选中
  tableRef.value.setSingleCurrent(tableData.value[0])
  // 复显多个选中
  tableRef.value.setCurrent(tableData.value)
})

</script>


```
:::


******
#### 带操作按钮的表格
包含操作按钮的表格，需要在tabbleheader中添加type为custom列，动态获取tableData后，对tableData数据进行遍历处理，将每一行都插入actions字段，处理tableData数据时，可以根据每行数据的状态，对操作项进行状态判断，如下例所示，对按钮中的disabled进行动态赋值
:::demo
```vue
<template>
  <common-table
    :table-header="tableHeader1"
    :table-data="tableData"
    :highlight="highlight"
    is-check
    @handle-current-row-change="handleCurrentRowChange"
    @handle-selection-change="handleSelectionChange"
  ></common-table>
</template>
<script setup>

import { ref } from 'vue';


const tableHeader1 = ref([
  { label: '姓名', name: 'name', 'width': '120' },
  { label: '年龄', name: 'age', 'width': '120' },
  {
    label: '操作',
    name: 'custom',
    type: 'custom',
    fixed: 'right',
    'min-width': '100'
  }
]);

function viewDetail() {}
function deleteDevice() {}
const btns = [
  { label: '查看详情', name: 'view', onClick: viewDetail },
  { label: '删除', disabled: true, type: 'danger', name: 'delete', onClick: deleteDevice },
  {
    label: '更多',
    children: [
      { label: '删除', type: 'danger', name: 'delete', onClick: deleteDevice }
    ]
  }
];

const tableData = ref([
  { name: '张三', age: 12 },
  { name: '张三', age: 12 },
  { name: '张三', age: 12 }
]);
tableData.value.map((item) => {
  item.actions = btns;
  return item;
});
const highlight = ref(true);

const currentRow = ref();
// 选择高亮
function handleCurrentRowChange(val) {
  currentRow.value = val;
}

// const isCheck = ref(true);
//
function handleSelectionChange(val) {
  console.log(val);
}

</script>


```
:::

#### 带表单元素的表格
  如果表格中需要使用到表单元素时，需要在tableHeader中加入type值，目前支持的type类型有input/select/date-picker/input-num/radio/switch/checkbox/color/link/tag，具体使用方法见下面示例：
  
:::demo
```vue
<template>
  <common-table
    :table-header="tableHeader1"
    :table-data="tableData"
    :highlight="highlight"
    is-check
    @handle-current-row-change="handleCurrentRowChange"
    @handle-selection-change="handleSelectionChange"
  ></common-table>
</template>
<script setup>

import { ref } from 'vue';


const tableHeader1 = ref([
  { label: '姓名', name: 'name', type: 'input', 'min-width': '100' },
  {
    label: '年龄',
    name: 'age',
    type: 'select',
    attrs: {
      options: [{ label: '123132', value: 123 }]
    },
    'width': '100'
  },
  {
    label: '性别',
    name: 'sex',
    type: 'switch',
    'width': '80'
  },
  {
    label: '爱好',
    name: 'states',
    type: 'tag',
    'width': '100'
  },
  {
    label: '操作',
    name: 'custom',
    type: 'custom',
    fixed: 'right',
    'min-width': '100'
  }
]);

function viewDetail() {}
function deleteDevice() {}
const btns = [
  { label: '查看详情', name: 'view', onClick: viewDetail },
  { label: '删除', disabled: true, type: 'danger', name: 'delete', onClick: deleteDevice },
  {
    label: '更多',
    children: [
      { label: '删除', type: 'danger', name: 'delete', onClick: deleteDevice }
    ]
  }
];
function parseStates(key) {
  const states = {
    label: key,
    attrs: {
      type: 'success'
    }
  };
  switch (key) {
    case '离线':
      states.attrs.type = 'normal';
      break;
    case '在线':
      states.attrs.type = 'success';
      break;
    case '损坏':
      states.attrs.type = 'danger';
      break;
    default:
      states.attrs.type = 'info';
      break;
  }
  return states;
}
const tableData = ref([
  { name: '张三', age: 12, sex: true, like: '离线', },
  { name: '张三', age: 12, sex: true,like: '在线' },
  { name: '张三', age: 12, sex: true, like: '损坏'}
]);
tableData.value.map((item) => {
  item.actions = btns;
  item.states = parseStates(item.like)
  return item;
});
const highlight = ref(true);

const currentRow = ref();
// 选择高亮
function handleCurrentRowChange(val) {
  currentRow.value = val;
}

// const isCheck = ref(true);
//
function handleSelectionChange(val) {
  console.log(val);
}

</script>


```
:::


### 配置参数
| 参数      | 说明        | 类型    | 是否必须 |
| :------- | :------------ | :------- | :------- |
| tableHeader | 表头， | Array | false  |
|  ----label  | 表头展示文本  |  String | true  |
|  ----name  | 表头key  |  String | true  |
|  ----type  | 表格元素类型，默认正常展示，如果type存在值时，会进入插槽模式，input/select/date-picker/input-num/radio/switch/checkbox/color/link/tag | String  |  false |
|  ----width  | 表格单元格宽度，如果不写会默认平均分配  | String  | false  |
|  ----min-width  | 表格单元格最小宽度， 如果与width混合使用后会自动撑开表格  | String  | false  |
|  ----fixed  | 单元格浮动位置，right/left  | String  | false  |
| tableData | 表格数据 | Array | false  |
| tableAttrs | el-table原始属性继承 | Array | false  |
| isCheck | 启东表格多选功能 | Array | false  |
| isDisable | 当启用在表格中使用表单元素时，可以通过对此字段进行是否可编辑的控制 | Array | false  |
| highlight | 是否高亮 | Boolean | false  |
| isEmpty | 是否是空数据，默认为true | Boolean | false  |
| height | 表格高度，默认为100% | String | false  |

### 事件

| 事件名称   | 说明       | 回调     |
| :--------| :-------- | :--------------- | 
| changeEvent |  表格中表单元素触发change事件时触发的回调函数 | -- |
| blurEvent |   表格中表单元素触发blur事件时触发的回调函数 | -- |
| handleCurrentRowChange |  点击获取当前行事件 | -- |
| svgEvent |  节点点击时生效 | -- |
| handleSelectionChange |  节点点击时生效 | -- |