表格

### 表格
<div class="textDiv">

![](/media/202404/2024-04-30_091608_871548.png)

------------
表格初始化

------------
代码示例如下
```html
<template>
    <div>
        <input v-model="isBigData" />
        <button @click="isBigData=!isBigData">isBigData</button>
        <button @click="isEdit=!isEdit">isEdit</button>
        <button @click="clearFilter">clearFilter</button>
        <hi-table
                size="mini"
                stripe
                ref="tb"
                emptyText="我是空数据！"
                :isBigData="isBigData"
                :isEdit="isEdit"
                :singleCheck="true"
                height="300"
                hasSelection
                hasRowNumber
                hasSetting
                :colWidthCount="true"
                :showSummary="true"
                :model="tableData1"
                :columns="columns"
                :rules="rules"
                :tree-props="treeProps"
                :row-key="rowKey"
                :contextMenu="contextMenu"
                row-class-name="bbbbbbbbb"
                header-cell-class-name="aaaaaaa"
            >
            <div slot="toolLeft">left</div>
            <div slot="toolRight">right</div>
            <div slot="subpage" slot-scope="dd">
                <b v-html="dd.index||2"></b>
            </div>
        </hi-table>     
    </div>
</template>
<style>
.aaaaaaa{color:red;}
</style>
<script>
    export default {
        provide: {
            pageControlState: null
        },
        data() {
            return {
                isBigData: false,
                isEdit: false,
                num: 0,
                hasSetting:true,
                contextMenu:{
                    // lock:true,
                    copy:true,
                    fill:true,
                    paste:true,
                },
                tableData: [{id:1,FTest:10}],
                tableData0: [{
                    id: 1,
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                }, {
                    id: 2,
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                }, {
                    id: 3,
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄",
                    children: [{
                        id: 31,
                        date: "2016-05-01",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1519 弄"
                        }, {
                        id: 32,
                        date: "2016-05-01",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1519 弄"
                    }]
                }, {
                    id: 4,
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                }],
                tableData1: [{
                    id: 1,
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                    FMoney:1,
                    FNote: "上海市普陀区金沙江路 1518 弄"
                }, {
                    id: 2,
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄",
                    FMoney:2,
                    FNote: "上海市普陀区金沙江路 1517 弄"
                }, {
                    id: 3,
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄",
                    FMoney:3,
                    FNote: "上海市普陀区金沙江路 1517 弄"
                }, {
                    id: 4,
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄",
                    FMoney:4,
                    FNote: "上海市普陀区金沙江路 1516 弄"
                }],
                inputNumber: {
                    precision: 2,
                    format: "￥0.00",
                    controlsPosition: "right",
                },
                rules: {
                    createTime: [
                        {
                            required: true,
                            message: "请选择日期",
                            trigger: "blur",
                        },
                    ],
                    FMoney: [
                        {
                            min: 1,
                            trigger: "blur",
                        },
                    ],
                    FName: [
                        {
                            required: true,
                            message: "请输入活动名称",
                            trigger: "blur",
                        },
                        {
                            min: 3,
                            max: 5,
                            message: "长度在 3 到 5 个字符",
                            trigger: "blur",
                        },
                    ],
                },
                treeProps: null,//{ children: "children", hasChildren: "hasChildren" },
                rowKey: "id",
                columns: [
                    {
                        label:"虚拟列",
                        colType:"virtual",
                        // readonly:true
                    },
                    {
                        label: "自定义列",
                        width: 100,
                        isShow:true,
                        colType:"custom",
                        slot: [
                            {
                                element: "el-button",
                                label: "调单",
                                props: {
                                    size:"mini",
                                    round:true
                                },
                                handles:{
                                    click: this.handleClick
                                }
                            },
                            {
                                element: "el-tag",
                                label: "默认标签",
                                props: {
                                },
                                handles:{
                                    click: this.handleClick
                                }
                            },
                        ],
                    },/*
                    {
                        label: "自定义列1",
                        width: 100,
                        isShow:true,
                        colType:"group",
                        children:[
                            {
                                id: "date",
                                name: "date",
                                label: "日期",
                                element: "el-date-picker",
                                props: {},
                            },
                            {
                                name: "address",
                                label: "地址",
                                element: "el-input",
                                props: {},
                            },
                        ]
                    },*/
                    {
                        name: "FNote",
                        label: "备注",
                        element: "el-input",
                        props: {
                            /*readonly:true,*/
                        },
                    },
                    {
                        name: "FTest",
                        label: "test",
                        element: "HiProgress",
                        // width: 100,
                        sortable:true,
                        isShow:false
                    },
                    {
                        name: "FName",
                        label: "姓名2",
                        element: "ElSwitch",
                        // width: 100,
                        sortable:true,
                        formatFn: function(value) {
                            return "格式化：" + (value || "");
                        },
                        // readonly:true,
                        required: true,
                    },
                    {
                        // width: 200,
                        name: "FUse",
                        label: "启用",
                        element: "el-checkbox",
                        props: {},
                    },                    
                    {
                    name: "imageview",
                    label: "附件上传123",
                    colspan: 3,
                    rowspan: 1,
                    element: "HiImageCropper",
                    // readonly:true,
                    props: {
                            // disabled: true,
                            readonly:true,
                            popup:true,
                            size:"mini",
                            "with-credentials": true,
                            accept: "image/png, image/jpeg",
                            limit: 1,
                            fileExtension:"jpg",
                            fileSize:2,
                            // "show-file-list":false,
                            multiple: true,
                            // "listType": "picture-card",
                        },
                    },
                    // {
                    //     width: 200,
                    //     name: "FDept",
                    //     label: "部门",
                    //     element: "hi-data-select",
                    //     props: {
                    //         lookup: {
                    //             storeCfg: {
                    //                 modelFile:
                    //                     "purchase/order/dataset/OrderEntity.xml",
                    //                 //数据集配置  部门
                    //                 id: "dept",
                    //                 //主键
                    //                 primary: ["id"],
                    //                 //操作权限
                    //                 operations: [
                    //                     "oinsert",
                    //                     "odelete",
                    //                     "oquery",
                    //                     "omodify",
                    //                 ],
                    //                 fields: {
                    //                     FID: {
                    //                         name: "FID", //字段ID
                    //                         label: "部门ID", //字段描述
                    //                         dbtype: "dbInt", //数据类型
                    //                         required: true,
                    //                         readonly: true,
                    //                         length: 50,
                    //                         rules: [],
                    //                     },
                    //                     FNUMBER: {
                    //                         name: "FNUMBER", //字段ID
                    //                         label: "部门描述", //字段描述
                    //                         dbtype: "dbText", //数据类型
                    //                     },
                    //                     FUSERID: {
                    //                         name: "FUSERID", //字段ID
                    //                         label: "部门名称", //字段描述
                    //                         dbtype: "dbString", //数据类型
                    //                     },
                    //                 },
                    //             },
                    //             active: true,
                    //             multiSelect: false,
                    //             returnFields: {
                    //                 FDept: "FNUMBER",
                    //             },
                    //             columns: [
                    //                 {
                    //                     name: "FID",
                    //                     label: "FID",
                    //                     width: 200,
                    //                 },
                    //                 {
                    //                     name: "FNUMBER",
                    //                     label: "编号",
                    //                     width: 400,
                    //                 },

//                 {
                    //                     name: "FUSERID",
                    //                     label: "FUSERID",
                    //                 },
                    //             ],
                    //             queryOption: {
                    //                 fields: [
                    //                     {
                    //                         name: "FID",
                    //                         label: "FID",
                    //                         element: "el-input",
                    //                     },
                    //                     {
                    //                         name: "FNUMBER",
                    //                         element: "el-input",
                    //                         label: "编号",
                    //                     },
                    //                     {
                    //                         name: "FUSERID",
                    //                         element: "el-input",
                    //                         label: "FUSERID",
                    //                         value: "admin",
                    //                     },
                    //                 ],
                    //             },
                    //         },
                    //     },
                    // },
                ],
            };
        },
        mounted() {
            let list = [];
            // for (let i = 0; i < 20; i++) {
            //     list.push({
            //         FName: "张三" + i,
            //         createTime: "2018-09-09 09:09:09",
            //         FSex: 1,
            //         FUse: 0,
            //         FMoney: 0,
            //         FAge: 0,
            //     });
            // }
            // this.$set(this, "tableData", list);
            // this.$refs.tb.$refs.ElTable.store.states.columns.pop();
        },
        methods: {
            clearFilter(){
                console.log( this.$refs.tb );
                this.$refs.tb.clearFilter()
            },
            handleClick(evt, row, gridCmp) {

gridCmp.dataSource;
                alert("hasRowNumber:" + gridCmp.hasRowNumber);
            },
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 3) {
                    if (rowIndex % 2 === 0) {
                        return {
                            rowspan: 2,
                            colspan: 1,
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0,
                        };
                    }
                }
            },
        },
    };
</script>
```

</div>

### Attributes

| 参数           | 说明                                                                                                                                       | 类型                                               | 可选值 | 默认值                                                  |
|--------------|------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------|-----|------------------------------------------------------|
| dataSource   | 数据集                                                                                                                                      | ArrayObject                                      | —   | —                                                    |
| model        | 目录数据                                                                                                                                     | ArrayObject                                      | —   | []                                                   |
| hasSelection | 多选框                                                                                                                                      | Boolean                                          | —   | false                                                |
| hasRowNumber | 行号                                                                                                                                       | Boolean                                          | —   | false                                                |
| isEdit       | 是否可编辑网格                                                                                                                                  | Boolean                                          | —   | false                                                |
| border       | 是否边框                                                                                                                                     | Boolean                                          | —   | false                                                |
| hasOperAdd   | 编辑时操作列的添加按钮                                                                                                                              | Boolean                                          | —   | true                                                 |
| hasOperDel   | 编辑时操作列的删除按钮                                                                                                                              | Boolean                                          | —   | true                                                 |
| columns      | 列配置                                                                                                                                      | Array                                            | —   | []                                                   |
| rules        | 相关列的验证规则详细看 element                                                                                                                      | Object                                           | —   | []                                                   |
| isBigData    | 大数据支持                                                                                                                                    | Boolean                                          | —   | true                                                 |
| row-key      | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 | String                                           | —   | —                                                    |
| tree-props   | 渲染嵌套数据的配置选项                                                                                                                              | Object                                           | —   | { hasChildren: "hasChildren", children: "children" } |
| span-method  | 合并行或列的计算方法                                                                                                                               | Function({ row, column, rowIndex, columnIndex }) | —   | —                                                    |

### Attributes columns

| 参数        | 说明                | 类型       | 可选值/返回参数          | 默认值 |
|-----------|-------------------|----------|-------------------|-----|
| name      | 字段名               | String   | —                 | —   |
| label     | 字段标题              | String   | —                 | —   |
| fixed     | 固定列位置             | String   | left,right,center | —   |
| summary   | 汇总                | String   | avg 求平均,sum 求和    | —   |
| summaryFn | 自定义汇总函数           | Function | value             | —   |
| formatFn  | 列格式化函数            | Function | value 字段值         | —   |
| element   | emelent、hi-ui 组件名 | String   | —                 | —   |
| props     | 组件用到的配置           | Object   | —                 | —   |
| children  | 字列，列配置。组成分组表头     | Object   | column            | —   |

### Events

| 事件名称             | 说明                                                            | 回调参数                      |
|------------------|---------------------------------------------------------------|---------------------------|
| row-click        | 行点击事件                                                         |                           |
| after-cell-click | 列单元格点击事件                                                      | row, column, cell, event  |
| row-dblclick     | 双击行事件                                                         | row, column, event        |
| selection-change | 行选中事件                                                         | 选中的记录 selection           |
| selection-all    | 全选事件                                                          | 选中的记录 selection           |
| current-change   | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |

### Function

| 方法名称     | 说明                                                                                    | 返回值            |
|----------|---------------------------------------------------------------------------------------|----------------|
| validate | 编辑网格验证,errors 每行每列的错 errors[0][0] {field: "FMoney",message: "FMoney is not a string"} | hasError,rrors |

</style>