前端那些事20240201-前端那些事-avue2 表头配置 多级表头

<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>

运行结果