用qml在qt 5.15 和qt quick 2中通过将tableview和listmodel数据关联实现一个可通过手触摸拖动列头中间的线调节列宽的多列的表格，其中按下的时候虚线出现可拖动，松开时虚线消失，将位置更新到列宽，更新显示

可以通过以下步骤实现：

1. 创建一个 `TableView` 控件，并将其 `model` 属性设置为一个 `ListModel`，用于存储表格数据。

TableView {
    id: tableView
    model: ListModel {
        // define properties for each column
        ListElement { col1: "data1"; col2: "data2"; col3: "data3" }
        ListElement { col1: "data4"; col2: "data5"; col3: "data6" }
        // add more items as needed
    }
}

2. 为 `TableView` 控件添加多个列，并将其 `role` 属性设置为 `model` 中的对应属性。

TableViewColumn {
    role: "col1"
    title: "Column 1"
    width: 100 // set initial width
}
TableViewColumn {
    role: "col2"
    title: "Column 2"
    width: 100 // set initial width
}
TableViewColumn {
    role: "col3"
    title: "Column 3"
    width: 100 // set initial width
}

3. 创建一个 `MouseArea` 控件，用于实现拖动列头中间的线调节列宽，并添加到每个列头中。

TableViewColumn {
    role: "col1"
    title: "Column 1"
    width: 100 // set initial width
    headerDelegate: Rectangle {
        color: "lightgray"
        height: parent.height
        Text {
            text: headerData
            anchors.centerIn: parent
        }
        MouseArea {
            id: headerMouseArea
            anchors {
                left: parent.left
                right: parent.right
                top: parent.top
                bottom: parent.bottom
            }
            property int startX: 0
            property int startWidth: 0
            property bool dragging: false
            property int delta: 0
            property int headerIndex: 0
            Rectangle {
                id: dragLine
                x: -1
                y: 0
                height: parent.height
                width: 2
                color: "black"
                visible: dragging
            }

            onPositionChanged: {
                if (!dragging) {
                    dragLine.visible = true
                }
                delta = mouse.x - startX
                dragging = true
                dragLine.x = mouse.x - dragLine.width / 2
            }
            onPressed: {
                startX = mouse.x
                startWidth = tableView.columnWidthProvider(headerIndex)
            }
            onReleased: {
                dragging = false
                dragLine.visible = false
                tableView.setColumnWidthProvider(headerIndex, startWidth + delta)
            }
        }
    }
}

4. 在 `MouseArea` 控件中添加一个虚线 `Rectangle`，用于显示拖动时的位置。

5. 将 `MouseArea` 控件添加到每个列头中，并将其 `headerIndex` 属性设置为对应列的索引。

这样就完成了一个可通过手触摸拖动列头中间的线调节列宽的多列的表格，按下时虚线出现可拖动，松开时虚线消失，将位置更新到列宽并更新显示。