空状态

普通用法

暂无数据

emptyText属性可以配置空状态时的提示语

<template>
  <avue-crud ref="crud"
             :option="option"
             :data="data"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      option: {
        emptyText: '自定义暂无数据提示语',
        column: [{
          label: '姓名',
          prop: 'name'
        }, {
          label: '年龄',
          prop: 'sex'
        }]
      },
      data: []
    }
  }
}
</script>

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

自定义空状态

当然你也可以自定义empty卡槽

<template>
  <avue-crud ref="crud"
             :option="option"
             :data="data">
    <template #empty>
      <avue-empty image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
                  desc="自定义的提示语">
        <br />
        <el-button type="primary"
                   @click="handleAdd">新增数据</el-button>
      </avue-empty>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      option: {
        emptyText: '自定义暂无数据提示语',
        column: [{
          label: '姓名',
          prop: 'name'
        }, {
          label: '年龄',
          prop: 'sex'
        }]
      },
      data: []
    }
  },
  methods: {
    handleAdd () {
      this.$refs.crud.rowAdd();
    }
  }
}
</script>

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