# useColumnsSet Hook

`useColumnsSet` 是一个 控制表头展示与否的api。

## useColumnsSet 参数
 * colunms {Array} 传入的表头数据
 * columnKey {String} 唯一的key, 用于区分不同的表头

## 功能
-  columnsChange ：Function, 改变表头的函数。
-  columnDatas ：经过处理过的表头。

## 注意点
* 1.columns中有type:slot插槽类型，需要添加一个title:  表头名称
* 2.如果需要禁用某列让其无法配置，需要添加字段disabled: true

```js
const columns = [
  {
    type: 'slot',
    slotName: 'test',
    title: "测试"
  },
  {
    key: "instanceType",
    title: "普通",
    disabled: true,
  },
]
```

## 使用方法

<div class="options-api">

```vue
<script setup>
import { useColumnsSet,usePageDownload } from "@ksconsole/hooks";

const columns = ref([
  {
    key: "instanceType",
    title: "数据1"
  },
  {
    key: "productType",
    title: "数据2"
  },
  {
    key: "instanceName",
    title: "数据3"
  },
  {
    key: "region",
    title: "数据4"
  }
]);
/** 
 * 自定义列表配置逻辑 
 * columns: 表头数据
 * columnKey: 唯一标识
 */
const columnKey = 'onlyKey'
const { columnDatas,columnsChange } = useColumnsSet(columns, columnKey)
 
</script>
<template>
  <div class="main-content">
    <div class="margin-bottom-20">
      <KsSearch
          ...
          :columnDatas="columnDatas"
          :columnKey='columnKey'
          @changeColumns='columnsChange'
      >
       ...
      </KsSearch>
    </div>
    <CommonTable
        ...
        :columns="columnDatas"
        ...
    >
    </CommonTable>
  </div>
</template>
```

</div>