<avue-crud :option="option" :data="data" ></avue-crud>
<script>
export default {
data() {
return {
option: {
excelBtn:true,
border: true,
index: true,
expandLevel: 3,
headerAlign: 'center',
align: 'center',
tree: true,
labelWidth: 100,
column: [{
label: '姓名',
prop: 'name',
width:140,
}, {
label: '性别1',
prop: 'sex',
},
{
label: '自定义图标',
prop: 'icon',
type: "icon",
iconList: [{
label: '基本图表',
list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
}]
}, {
label: '多级表头',
children: [{
label: '信息',
children: [{
label: '年龄',
prop: 'age'
}, {
label: '手机号',
prop: 'phone',
}]
}, {
label: '地区',
prop: 'address',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl:'https://cli.avuejs.com/api/area/getProvince'
}]
}, {
label: '测试',
prop: 'test',
},
{
label: '手机信息1',
prop: 'phone1'
}],
},
data: [{
name: '张三',
age: 14,
address: '110000',
phone1: '17547400800',
phone: '17547400800',
icon: 'el-icon-time',
test: 1,
sex: '男'
}, {
name: '王五',
age: 10,
address: '120000',
test: 1,
sex: '女',
icon: 'el-icon-star-on',
phone1: '17547400800',
phone: '17547400800'
}]
}
}
}
</script>
运行结果