# hct-element

## 安装
* npm i hct-element
* yarn add hct-element

## 使用
* main.js 
    > import hctElement from 'hct-element'
    > import 'hct-element/hct-element/hct-element.css'
    > import 'hct-element/src/styles/element/index.scss'
    > import 'hct-element/src/assets/iconfont.css'


## 使用方式
### hct-table
* ref可选参数
    | 参数  | 说明 | 类型 | 可选 | 默认值 |
    |-|-|-|-|-|
    |tableHeader|自定义表头|Array|--|--|
* 参数(参考element-plus文档)-以下为新增参数
    | 参数  | 说明 | 类型 | 可选 | 默认值 |
    |-|-|-|-|-|
    |tableHeader|自定义表头|Array|--|--|
* 插槽(参考element-plus文档)-以下为新增插槽---此为自定义表头插槽
    | 插槽名  | 说明 | 子标签 |
    |-|-|-|
    |(表头prop)|自定义表格内容|Array|
* 插槽(参考element-plus文档)---无自定义表头
    
* 事件(参考element-plus文档)

1.  ``` 不带表头用法和element一样
    <div>
        <hct-table :data="tableData">
            <el-table-column prop="date" label="Date" width="180" />
        </hct-table>
    </div>
    
   ```
2. ``` 自定义表头
    <hct-table :data="tableData" :table-header="tablerHeader">
        <template #date> <!-- 自定义内容# + prop (可不加) -->
            <el-button>123</el-button>
        </template>
    </hct-table>
    <script>
        let tableHeader = [{
            prop: "date",
            label: "date",
            isIcon: true,
            width: 180,
        },
        {
            prop: "name",
            label: "name",
            fixed: false,
            isIcon: true,
            width: 180,
        },
        {
            prop: "address",
            label: "address",
            fixed: false,
            isIcon: true,
            width: 180,
        },
        {
            prop: "operate",
            label: "操作",
            fixed: "left",
            isIcon: true,
            width: "auto",
            maxWidth: "475px",
        }]
    </script>
    ```
### hct-setting
* ref可取参数
    | 参数  | 说明 | 类型 | 可选 | 默认值 |
    |-|-|-|-|-|
    |showVisible|表格设置排列以及表头显示隐藏|Boolean|true / false|false|
    |fixedValue|固定列搜索参数|String|--|--|
    |moveValue|移动列列搜索参数|String|--|--|
* 参数
    | 参数  | 说明 | 类型 | 可选 | 默认值 |
    |-|-|-|-|-|
    |moveList|移动列表|Array|--|--|
    |fixedList|固定列表|Array|--|--|
*  事件
    | 参数  | 说明 | 回调参数 |
    |-|-|-|
    |onSave|点击保存|--|
    |cancel|点击取消|--|
1. ``` 
    <hct-setting
        ref="hctLayoutSettingRefs"
        :show-list="showList"
        :hidden-list="hiddenList"
        @onSave="onSave"
        @cancel="cancel"
    />
    <script setup>
        let hctLayoutSettingRefs = ref();
        // 显示隐藏
        const show = ()=>{
            hctLayoutSettingRefs.value.showVisible = true // 显示
            hctLayoutSettingRefs.value.showVisible = false //隐藏
        }
        // 保存事件
        const onSave = () => {
            console.log('保存')
        }
        // 取消
        const cancel = () =>{
            console.log('取消了')
        }
    </script>
   ```