QML tableView表格自定义

import QtQuick 2.12
import QtQuick.Controls 2.12
import Qt.labs.qmlmodels 1.0

  Rectangle {
            z: 10
            id: tableView
            width: dpH(919)
            height: dpH(475)
            anchors {
                top: parent.top
                topMargin: dpH(88)
                horizontalCenter: parent.horizontalCenter
            }
            Item {
                id: control
                implicitHeight: parent.height
                implicitWidth: parent.width

                //表头行高
                property int headerHeight: dpH(48)
                //行高
                property int rowHeight: dpH(48)
                //滚动条
                property color scrollBarColor: "#E5E5E5"
                property int scrollBarWidth: 7
                //列宽
                property variant columnWidthArr: [control.width
                    / 3, control.width / 3, control.width / 3]

                property var horHeader: ["名称", "修改日期", "来源"]
                property int selected: -1
                property var datas: [{
                        "checked": false,
                        "id": 1,
                        "name": "汽车曲轴分拣项目1",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }, {
                        "checked": false,
                        "id": 2,
                        "name": "汽车曲轴分拣项目2",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }, {
                        "checked": false,
                        "id": 3,
                        "name": "汽车曲轴分拣项目3",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }, {
                        "checked": false,
                        "id": 4,
                        "name": "汽车曲轴分拣项目4",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }, {
                        "checked": false,
                        "id": 5,
                        "name": "汽车曲轴分拣项目5",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }, {
                        "checked": false,
                        "id": 6,
                        "name": "汽车曲轴分拣项目6",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }, {
                        "checked": false,
                        "id": 7,
                        "name": "汽车曲轴分拣项目7",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }, {
                        "checked": false,
                        "id": 8,
                        "name": "汽车曲轴分拣项目8",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }, {
                        "checked": false,
                        "id": 9,
                        "name": "汽车曲轴分拣项目9",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }, {
                        "checked": false,
                        "id": 10,
                        "name": "汽车曲轴分拣项目10",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }, {
                        "checked": false,
                        "id": 11,
                        "name": "汽车曲轴分拣项目11",
                        "time": "2020/1/14    17:33",
                        "source": "相机建模"
                    }]

                //展示数据
                TableView {
                    id: table
                    anchors {
                        fill: parent
                        topMargin: control.rowHeight
                    }

                    clip: true
                    boundsBehavior: Flickable.StopAtBounds
                    columnSpacing: 0
                    rowSpacing: 0

                    //内容行高
                    rowHeightProvider: function (row) {
                        return control.headerHeight
                    }
                    //内容列的列宽
                    columnWidthProvider: function (column) {
                        return control.columnWidthArr[column]
                    }
                    ScrollBar.vertical: ScrollBar {
                        id: scroll_vertical
                        anchors.right: parent.right
                        anchors.rightMargin: 0
                        contentItem: Rectangle {
                            visible: (scroll_vertical.size < 1.0)
                            implicitWidth: control.scrollBarWidth
                            color: control.scrollBarColor
                        }
                    }

                    ScrollBar.horizontal: ScrollBar {
                        id: scroll_horizontal
                        anchors.bottom: parent.bottom
                        anchors.bottomMargin: 0
                        anchors.left: parent.left
                        anchors.leftMargin: 0
                        contentItem: Rectangle {
                            visible: (scroll_horizontal.size < 1.0)
                            implicitHeight: control.scrollBarWidth
                            color: control.scrollBarColor
                        }
                    }

                    model: TableModel {

                        TableModelColumn {
                            display: "name"
                        }
                        TableModelColumn {

                            display: "time"
                        }
                        TableModelColumn {
                            display: "source"
                        }

                        rows: control.datas
                    }

                    delegate: Rectangle {
                        color: control.selected === row ? "#EAF1FF" : "white" //点击改变行背景颜色

                        Text {
                            anchors.fill: parent
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            text: display
                            font.pixelSize: dpH(15)
                            color: "#707070"
                        }
                        Rectangle {
                            color: "#E5E5E5"
                            width: parent.width
                            height: 1
                            anchors {
                                bottom: parent.bottom

                            }
                        }

                        MouseArea {
                            anchors.fill: parent

                            onClicked: {
//注意增删改查只需要对control.datas原数组修改再赋值给table.model.rows即可更新表格视图
                                control.selected = row
//例 点击任意一行增加一条数据

                                control.datas.push({
                                                       "checked": false,
                                                       "id": table.model.rows.length + 1,
                                                       "name": "汽车曲轴分拣项目"
                                                               + (table.model.rows.length + 1),
                                                       "time": "2020/1/14    17:33",
                                                       "source": "相机建模"
                                                  })
                                table.model.rows = control.datas
                                console.log(table.model.rows.length,JSON.stringify(table.model.rows[row]))
                            }
                        }
                    }
                }
        //表头样式

                Item {
                    id: header_horizontal
                    anchors {
                        left: parent.left
                        right: parent.right
                    }
                    height: control.rowHeight
                    z: 2

                    Row {
                        id: header_horizontal_row
                        anchors.fill: parent
                        leftPadding: -table.contentX
                        clip: true
                        spacing: 0

                        Repeater {
                            model: table.columns > 0 ? table.columns : 0

                            Rectangle {
                                id: header_horizontal_item
                                width: table.columnWidthProvider(
                                           index) + table.columnSpacing
                                height: control.rowHeight-1
                                color: "#F8F8F8"

                                Text {
                                    anchors.centerIn: parent
                                    text: control.horHeader[index]
                                    font.pixelSize: dpH(18)
                                    color: "#707070"
                                }
                                Rectangle {
                                    height: 1
                                    width: parent.width
                                    anchors.bottom: parent.bottom
                                    color: "#E5E5E5"
                                }
                                Rectangle {
                                    height: 1
                                    width: parent.width
                                    anchors.top: parent.top
                                    color: "#E5E5E5"
                                }
                            }
                        }
                    }
                }
            }
        }