其它类型

暂无数据

<template>
  <avue-crud ref="crud"
             :option="option"
             :data="data"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      user: {},
      data: [{
        icon: "el-icon-platform-eleme",
        color: 'rgba(201, 37, 37, 1)',
        array: '1,2,3',
        video: '/images/logo-bg.jpg',
        href: 'https://www.baidu.com',
        string: '/images/logo-bg.jpg,/images/logo-bg.jpg',
        img: 'https://avuejs.com/images/logo-bg.jpg,https://avuejs.com/images/logo-bg.jpg'
      }],
      option: {
        align: 'center',
        menuAlign: 'center',
        border: true,
        column: [{
          label: '超链接',
          prop: 'href',
          type: 'url'
        }, {
          label: '图标',
          prop: 'icon',
          type: 'icon',
          iconList: [{
            label: '阿里图标-Symbol图标',
            list: [{
              label: '机构',
              value: '#icon-jigou'
            },
            {
              label: '短信管理',
              value: '#icon-duanxinguanli'
            },
            {
              label: '发票管理系统',
              value: '#icon-fapiaoguanlixitong'
            },
            {
              label: '角色',
              value: '#icon-jiaose'
            },
            {
              label: '黑名单',
              value: '#icon-heimingdan2'
            },
            {
              label: 'KHCFDC_附件',
              value: '#icon-fujian4'
            },
            {
              label: '文档',
              value: '#icon-wendang3'
            },
            {
              label: '刷卡',
              value: '#icon-shuaka'
            },
            {
              label: '停车',
              value: '#icon-tingche3'
            },
            {
              label: '对象存储OSS',
              value: '#icon-duixiangcunchuOSS'
            },
            {
              label: '反馈',
              value: '#icon-fankui2'
            },
            {
              label: '短信',
              value: '#icon-ziyuan1'
            },
            {
              label: '对象存储服务',
              value: '#icon-beikongshuiwupingtaimenhu-tubiao_duixiangcunchufuwu'
            },
            {
              label: '数据库_jurassic',
              value: '#icon-jurassic_data'
            },
            {
              label: '日志',
              value: '#icon-rizhi1'
            },
            {
              label: '权限',
              value: '#icon-quanxian4'
            },
            {
              label: '订单',
              value: '#icon-5'
            },
            {
              label: '机构',
              value: '#icon-jigou1'
            },
            {
              label: '机构人员',
              value: '#icon-jigourenyuan'
            },
            {
              label: '角色管理',
              value: '#icon-jiaoseguanli4'
            },
            {
              label: '角色管理',
              value: '#icon-jiaoseguanli5'
            },
            {
              label: '数据监控',
              value: '#icon-shujujiankong'
            },
            {
              label: '活动展示',
              value: '#icon-huodongzhanshi'
            },
            {
              label: 'vip invitation',
              value: '#icon-vipinvitation'
            }
            ]
          }, {
            label: '基本图标',
            list: [{
              label: '名称1',
              value: 'el-icon-info'
            }, {
              label: '名称2',
              value: 'el-icon-error'
            }, {
              label: '名称3',
              value: 'el-icon-success'
            }, {
              label: '名称4',
              value: 'el-icon-warning'
            }, {
              label: '名称5',
              value: 'el-icon-question'
            }]
          }, {
            label: '方向图标',
            list: ['el-icon-info', 'el-icon-back', 'el-icon-arrow-left', 'el-icon-arrow-down', 'el-icon-arrow-right', 'el-icon-arrow-up']
          }, {
            label: '符号图标',
            list: ['el-icon-plus', 'el-icon-minus', 'el-icon-close', 'el-icon-check']
          }, {
            label: '阿里云图标',
            list: ['iconfont icon-zhongyingwen', 'iconfont icon-rizhi1', 'iconfont icon-bug', 'iconfont icon-qq1', 'iconfont icon-weixin1']
          }]
        }, {
          label: '颜色',
          prop: 'color',
          type: 'color'
        },
        {
          label: '单图',
          prop: 'video',
          type: 'upload',
          listType: 'picture-img',
          span: 24,
          propsHttp: {
            home: 'https://avuejs.com',
          },
          tip: '只能上传jpg/png用户头像，且不超过500kb',
          action: '/imgupload'
        }, {
          label: '图片',
          prop: 'img',
          dataType: 'string',
          type: 'img'
        }, {
          label: '图片上传组件',
          prop: 'string',
          dataType: 'string',
          type: 'upload',
          propsHttp: {
            home: 'https://avuejs.com',
            res: 'data'
          },
          span: 24,
          listType: 'picture-card',
          tip: '只能上传jpg/png文件，且不超过500kb',
          action: '/imgupload'
        }, {
          label: '数组',
          prop: 'array',
          dataType: 'number',
          propsHttp: {
            home: 'http://demo.cssmoban.com',
          },
          type: 'array'
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

其它自定义卡槽

头部卡槽

暂无数据

尾部卡槽

分页卡槽

共 40 条

• 1
• 2
• 3
• 4

前往

页

<template>
  <avue-crud :option="option"
             v-model:page="page"
             :data="data">
    <template #header>
      <el-tag>头部卡槽</el-tag>
    </template>
    <template #footer>
      <el-tag>尾部卡槽</el-tag>
    </template>
    <template #page>
      <el-tag>分页卡槽</el-tag>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      page: {
        total: 40
      },
      data: [{
        name: '张三',
        age: 18,
      }],
      option: {
        column: [{
          label: '姓名',
          prop: 'name'
        }, {
          label: '年龄',
          prop: 'age'
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码