空状态

普通用法

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-crud ref="crud"
             :option="option"
             :data="data"></avue-crud>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  emptyText: '自定义暂无数据提示语',
  column: [
    {
      label: '姓名',
      prop: 'name',
    },
    {
      label: '年龄',
      prop: 'sex',
    },
  ],
});

const data = ref([]);
</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 setup>
import { ref } from 'vue';
const crud = ref(null)
const option = ref({
  emptyText: '自定义暂无数据提示语',
  column: [
    {
      label: '姓名',
      prop: 'name',
    },
    {
      label: '年龄',
      prop: 'sex',
    },
  ],
});

const data = ref([]);

const handleAdd = () => {
  if (crud) {
    crud.value.rowAdd();
  }
};
</script>