大表哥(宇宙最强表格)

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>