hfun-element-plus

HFUN-TABLE 组件使用文档

属性

属性	说明	类型	可选值	默认值	是否必填
mTable	当前搜索表格的数据对象	Object	-	-	是
pageData	当前页数 每页显示条数	Object	-	-	是
hfun-table-operate	点击按钮回调	function	-	-	否

mTable 选项

属性	说明	类型	可选值	默认值	是否必填	示例
tableData	表格数据	Array	-	-	是	tableData:[]
tableHeader	表头数据	Array	-	-	是	tableHeader:[]

tableHeader 子属性

属性	说明	类型	可选值	默认值	是否必填	示例
label	表头名称	String		-	是
param	字段名称	String	-	-	是
sortable	是否排序	String	-	-	是
type	编辑时类型	String	-	-	是

事件

事件名	说明	回调参数
hfunTableOperate	“查询”按钮点击事件	-

使用案例

<template>
     <hfunSearchTable :mTable="mTable" :pageData="pageData" @hfun-table-operate="hfunTableOperate"/>
</template>
<script setup>
    import hfunSearchTable from './hfunUI/packages/hfun-table';

    import { ref, reactive, onMounted } from "vue";
    let pageData = reactive({
    pageIndex: 1, //当前页数
    pageNum: 10, //每页显示条数
    });
    let mTable = reactive({
        // 表格数据
        tableData: [
        {productType:'11',productNumber:'22',product:'某某产品',issDate:'2012-02-24'},
        {productType:'3',productNumber:'4',product:'某某产品2',businessStatus:3}
        ],
        // 表格头
        tableHeader: [
        { label: "产品类型", param: "productType", sortable: true ,type:'select',items:[
            {name:'请选择产品类型',value:''},
            {name:'类型1',value:'11'},
            {name:'类型2',value:'3'}
            
        ]},
        { label: "产品号码", param: "productNumber", sortable: true ,type:'input'},
        { label: "产品", param: "product" ,type:'input'},
        { label: "订单号", param: "orderNumber" ,type:'input'},
        { label: "客户名称", param: "customerName" ,type:'input'},
        { label: "业务状态", param: "businessStatus" ,type:'radio',items:[
            {name:'类型1',value:'1'},
            {name:'类型2',value:'3'}]},
        { label: "A-Z端装机位置", param: "azInstallLocation",type:'input' },
        { label: "发单日期", param: "issDate",type:'datePicker' ,type:'input'},
        {
            label: "操作",
            options: [
            {
                label: "详情",
                type: "success",
                methods: "detail",
                icon: "hfun-menubar-search",
            },
            {
                label: "编辑",
                type: "primary",
                methods: "edit",
                icon: "hfun-menubar-search",
            },
            
            {
                label: "删除",
                type: "danger",
                methods: "delete",
                icon: "hfun-menubar-search",
            },
            ],
        },
        ],
        // 表格总数
        totalNum: 0,
        // 当前页
        currentPage: 1,
    });
    /**
    * @Description: 表格组件操作栏事件
    * @Author: yeyanghui
    * @param {*} method 方法名
    * @param {*} val 当前行数据
    */
    const hfunTableOperate = ({ method, val }) => {
    console.log(val)
    };
    

</script>