hct-element v1.9.5

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>