卡片模式

TIP

3.4.0+

基本用法

暂无数据

设置grid配置为卡片模式,gridBtn和列表切换按钮，默认为true

<template>
  <avue-crud :option="option"
             :data="data"></avue-crud>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      data: [{
        name: '张三',
        sex: '男',
        age: 18,
        province: '110000'
      }, {
        name: '李四',
        sex: '女',
        age: 18,
        province: '130000'
      }],
      option: {
        grid: true,
        column: [
          {
            label: '姓名',
            prop: 'name',
          }, {
            label: '性别',
            prop: 'sex'
          }, {
            label: '年龄',
            prop: 'age',
          }, {
            label: '省份',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getProvince`
          }
        ]
      }
    }
  }
}
</script>

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

配置

暂无数据

一些配置用来改变布局和颜色

<template>
  <avue-crud :option="option"
             :data="data"></avue-crud>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      data: [{
        name: '张三',
        sex: '男',
        age: 18,
        province: '110000'
      }, {
        name: '李四',
        sex: '女',
        age: 18,
        province: '130000'
      }],
      option: {
        grid: true,
        gridSpan: 12,
        // gridBackgroundColor:'linear-gradient(to right, rgba(255,0,0,0.2), rgba(255,0,0,0.2))',
        gridBackgroundImage: '/images/grid.png',
        column: [
          {
            label: '姓名',
            prop: 'name',
          }, {
            label: '性别',
            prop: 'sex',
            gridRow: true
          }, {
            label: '年龄',
            prop: 'age',
          }, {
            label: '省份',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getProvince`
          }
        ]
      }
    }
  }
}
</script>

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