• 大表哥(宇宙最强表格)
    • 普通用法

    大表哥(宇宙最强表格)

    TIP

    1.0.9+

    • 复杂表头
    • 表格树
    • 自带分页信息
    • 自带增删改查
    • 自定义弹出表单
    • 支持crud组件全部功能
    • 支持form组件全部功能

    普通用法

    大表哥(宇宙最强表格) - 图1

    2.  <avue-crud :option="option" :data="data" :page="page" @on-load="onLoad"></avue-crud>
    3. <script>
    4. export default {
    5.     data() {
    6.       return {
    7.         page: {
    8.           pageSize: 20
    9.         },
    10.         option: {
    11.           border: true,
    12.           index: true,
    13.           expandLevel: 3,
    14.           headerAlign: 'center',
    15.           align: 'center',
    16.           tree: true,
    17.           labelWidth: 100,
    18.           column: [{
    19.             width:130,
    20.             label: '姓名',
    21.             prop: 'name',
    22.           }, {
    23.             label: '性别1',
    24.             prop: 'sex',
    25.           },
    26.           {
    27.             label: '自定义图标',
    28.             prop: 'icon',
    29.             type: "icon-select",
    30.             iconList: [{
    31.               label: '基本图表',
    32.               list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
    33.             }]
    34.           }, {
    35.             label: '复杂表头',
    36.             children: [{
    37.               label: '信息',
    38.               children: [{
    39.                 label: '年龄',
    40.                 prop: 'age'
    41.               }, {
    42.                 label: '手机号',
    43.                 prop: 'phone',
    44.               }]
    45.             }, {
    46.               label: '级别',
    47.               prop: 'grade',
    48.               type: 'select',
    49.               dicData: [{
    50.                 label: '测试',
    51.                 value: 1
    52.               }]
    53.             }]
    54.           }, {
    55.             label: '测试',
    56.             prop: 'test',
    57.           }],
    58.           group: [{
    59.             label: '用户信息',
    60.             prop: 'jbxx',
    61.             icon: 'el-icon-edit-outline',
    62.             column: [
    63.               {
    64.                 label: '姓名',
    65.                 prop: 'name'
    66.               },
    67.               {
    68.                 label: '年龄',
    69.                 prop: 'age'
    70.               }
    71.             ]
    72.           }, {
    73.             label: '其他信息',
    74.             prop: 'jbxxs',
    75.             icon: 'el-icon-edit-outline',
    76.             column: [
    77.               {
    78.                 label: '级别',
    79.                 prop: 'grade',
    80.                 type: 'select',
    81.                 dicData: [{
    82.                   label: '测试',
    83.                   value: 1
    84.                 }]
    85.               },
    86.               {
    87.                 label: '手机信息',
    88.                 prop: 'phone'
    89.               },
    90.               {
    91.                 label: '自定义图标',
    92.                 prop: 'icon',
    93.                 type: "icon-select",
    94.                 iconList: [{
    95.                   label: '基本图表',
    96.                   list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
    97.                 }]
    98.               },
    99.             ]
    100.           }]
    101.         },
    102.         data: [{
    103.           id:'1',
    104.           name: '张三',
    105.           age: 14,
    106.           grade: 1,
    107.           phone1: '17547400800',
    108.           phone: '17547400800',
    109.           icon: 'el-icon-time',
    110.           test: 1,
    111.           sex: '男',
    112.           children: [{
    113.             id:'2',
    114.             name: '李四',
    115.             age: 20,
    116.             grade: 1,
    117.             sex: '男',
    118.             test: 1,
    119.             phone1: '17547400800',
    120.             phone: '17547400800',
    121.             icon: 'el-icon-bell',
    122.             children: [{
    123.               id:'3',
    124.               name: '王五',
    125.               age: 10,
    126.               grade: 1,
    127.               test: 1,
    128.               sex: '女',
    129.               icon: 'el-icon-star-on',
    130.               phone1: '17547400800',
    131.               phone: '17547400800'
    132.             }]
    133.           }]
    134.         }, {
    135.           id:'4',
    136.           name: '王五',
    137.           age: 10,
    138.           grade: 1,
    139.           test: 1,
    140.           sex: '女',
    141.           icon: 'el-icon-star-on',
    142.           phone1: '17547400800',
    143.           phone: '17547400800'
    144.         }]
    145.       }
    146.     },
    147.     methods: {
    148.       onLoad(page) {
    149.         //模拟分页
    150.         this.page.total = 40
    151.       }
    152.     }
    153. }
    154. </script>