HFUN-TABLE 组件使用文档
属性
属性 | 说明 | 类型 | 可选值 | 默认值 | 是否必填 |
---|
mTable | 当前搜索表格的数据对象 | Object | - | - | 是 |
pageData | 当前页数 每页显示条数 | Object | - | - | 是 |
hfun-table-operate | 点击按钮回调 | function | - | - | 否 |
mTable 选项
属性 | 说明 | 类型 | 可选值 | 默认值 | 是否必填 | 示例 |
---|
tableData | 表格数据 | Array | - | - | 是 | tableData:[] |
tableHeader | 表头数据 | Array | - | - | 是 | 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>