FluentUI/example/qml/page/T_TableView.qml

201 lines
6.5 KiB
QML
Raw Normal View History

2023-05-22 16:17:51 +08:00
import QtQuick
2023-04-07 18:27:50 +08:00
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/component"
2023-04-07 18:27:50 +08:00
FluScrollablePage{
title:"TableView"
Component.onCompleted: {
const columns = [
{
title: '姓名',
dataIndex: 'name',
2023-06-14 19:29:23 +08:00
width:100,
2023-04-07 18:27:50 +08:00
},
{
title: '年龄',
2023-06-14 19:29:23 +08:00
dataIndex: 'item_age',
width:100,
minimumWidth:100
2023-04-07 18:27:50 +08:00
},
{
title: '住址',
dataIndex: 'address',
width:200
},
{
title: '别名',
dataIndex: 'nickname',
width:100
},
{
title: '操作',
dataIndex: 'action',
2023-05-15 21:14:37 +08:00
width:120
2023-04-07 18:27:50 +08:00
},
];
table_view.columns = columns
loadData(1,10)
}
2023-06-14 19:29:23 +08:00
Component{
id:com_age
Item{
id:item_age
property var ageArr: [100,300,500,1000]
height: 60
FluComboBox{
width: 80
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: 10
}
model: ListModel {
ListElement { text: 100 }
ListElement { text: 300 }
ListElement { text: 500 }
ListElement { text: 1000 }
}
Component.onCompleted: {
currentIndex=ageArr.findIndex((element) => element === dataModel.age)
}
2023-04-07 18:27:50 +08:00
}
2023-06-14 19:29:23 +08:00
}
2023-04-07 18:27:50 +08:00
}
Component{
id:com_action
Item{
2023-06-13 18:17:40 +08:00
height: 60
2023-04-07 18:27:50 +08:00
Row{
anchors.centerIn: parent
spacing: 10
FluFilledButton{
text:"编辑"
2023-05-15 21:14:37 +08:00
horizontalPadding: 6
2023-04-07 18:27:50 +08:00
onClicked:{
2023-06-14 19:29:23 +08:00
showError(JSON.stringify(dataObject))
2023-04-07 18:27:50 +08:00
}
}
FluFilledButton{
text:"删除"
2023-05-15 21:14:37 +08:00
horizontalPadding: 6
2023-04-07 18:27:50 +08:00
onClicked:{
2023-06-19 17:50:54 +08:00
tableView.remove(dataModel.index)
2023-04-07 18:27:50 +08:00
}
}
}
}
}
2023-04-09 19:29:50 +08:00
2023-06-15 14:46:32 +08:00
FluText{
Layout.topMargin: 20
text:"此TableView适用于小数据量带分页的表格大数据量请使用TableView2。"
}
2023-06-14 19:29:23 +08:00
FluTableView{
id:table_view
Layout.fillWidth: true
Layout.topMargin: 20
pageCurrent:1
pageCount:10
itemCount: 1000
onRequestPage:
(page,count)=> {
loadData(page,count)
}
}
2023-04-08 20:08:26 +08:00
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: 10
code:'FluTableView{
id:table_view
Layout.fillWidth: true
Layout.topMargin: 20
pageCurrent:1
pageCount:10
itemCount: 1000
onRequestPage:
(page,count)=> {
loadData(page,count)
}
Component.onCompleted: {
const columns = [
{
title: "姓名",
dataIndex: "name",
width:100
},
{
title: "年龄",
dataIndex: "age",
width:100
},
{
title: "住址",
dataIndex: "address",
width:200
},
{
title: "别名",
dataIndex: "nickname",
width:100
}
];
2023-04-19 18:04:14 +08:00
table_view.columns = columns
2023-04-08 20:08:26 +08:00
const dataSource = [
2023-04-19 18:04:14 +08:00
{
name: ",
age: 500,
address:"钟灵毓秀的花果山,如神仙仙境的水帘洞",
2023-04-08 20:08:26 +08:00
nickname:"齐天大圣"
2023-04-19 18:04:14 +08:00
}
];
2023-04-08 20:08:26 +08:00
table_view.dataSource = columns
}
}'
}
2023-04-07 18:27:50 +08:00
2023-05-15 21:14:37 +08:00
function loadData(page,count){
2023-06-14 19:29:23 +08:00
var numbers = [100, 300, 500, 1000];
function getRandomAge() {
var randomIndex = Math.floor(Math.random() * numbers.length);
return numbers[randomIndex];
}
var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
function getRandomName(){
var randomIndex = Math.floor(Math.random() * names.length);
return names[randomIndex];
}
var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
function getRandomNickname(){
var randomIndex = Math.floor(Math.random() * nicknames.length);
return nicknames[randomIndex];
}
var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
function getRandomAddresses(){
var randomIndex = Math.floor(Math.random() * addresses.length);
return addresses[randomIndex];
}
2023-05-15 21:14:37 +08:00
const dataSource = []
for(var i=0;i<count;i++){
dataSource.push({
2023-06-14 19:29:23 +08:00
name: getRandomName(),
item_age: com_age,
age:getRandomAge(),
address: getRandomAddresses(),
nickname: getRandomNickname(),
2023-05-15 21:14:37 +08:00
action:com_action
})
}
table_view.dataSource = dataSource
}
2023-04-07 18:27:50 +08:00
}