hct-element

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. <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>