# 大表哥(宇宙最强表格)
共 40 条
- 1
- 2
页
<template>
<avue-crud :option="option"
:data="data"
v-model:page="page"
@on-load="onLoad"></avue-crud>
</template>
<script>
export default {
data () {
return {
page: {
pageSize: 20
},
option: {
excelBtn: true,
border: true,
index: true,
expandLevel: 3,
headerAlign: 'center',
align: 'center',
tree: true,
labelWidth: 100,
column: [{
width: 130,
label: '姓名',
prop: 'name',
display: false
}, {
label: '性别1',
prop: 'sex',
display: false
},
{
label: '自定义图标',
prop: 'icon',
type: "icon",
iconList: [{
label: '基本图表',
list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
}],
display: false
}, {
label: '多级表头',
display: false,
children: [{
label: '信息',
display: false,
children: [{
label: '年龄',
prop: 'age',
display: false
}, {
label: '手机号',
prop: 'phone',
display: false
}]
}, {
label: '级别',
prop: 'grade',
type: 'select',
display: false,
dicData: [{
label: '测试',
value: 1
}]
}]
}, {
label: '测试',
prop: 'test',
display: false
}],
group: [{
label: '用户信息',
prop: 'jbxx',
icon: 'el-icon-edit-outline',
column: [
{
label: '姓名',
prop: 'name'
},
{
label: '年龄',
prop: 'age'
}
]
}, {
label: '其他信息',
prop: 'jbxxs',
icon: 'el-icon-edit-outline',
column: [
{
label: '级别',
prop: 'grade',
type: 'select',
dicData: [{
label: '测试',
value: 1
}]
},
{
label: '手机信息',
prop: 'phone'
},
{
label: '自定义图标',
prop: 'icon',
type: "icon",
iconList: [{
label: '基本图表',
list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
}]
},
]
}]
},
data: [{
id: '1',
name: '张三',
age: 14,
grade: 1,
phone1: '17547400800',
phone: '17547400800',
icon: 'el-icon-time',
test: 1,
sex: '男',
children: [{
id: '2',
name: '李四',
age: 20,
grade: 1,
sex: '男',
test: 1,
phone1: '17547400800',
phone: '17547400800',
icon: 'el-icon-bell',
children: [{
id: '3',
name: '王五',
age: 10,
grade: 1,
test: 1,
sex: '女',
icon: 'el-icon-star-on',
phone1: '17547400800',
phone: '17547400800'
}]
}]
}, {
id: '4',
name: '王五',
age: 10,
grade: 1,
test: 1,
sex: '女',
icon: 'el-icon-star-on',
phone1: '17547400800',
phone: '17547400800'
}]
}
},
methods: {
onLoad (page) {
//模拟分页
this.page.total = 40
}
}
}
</script>
显示代码复制代码复制代码