在vue中使用avue-crud分页和表体分离开。

在Vue中使用Avue-CRUD，可以通过分页和表体分离的方式来实现。

首先，安装并引入Avue-CRUD库。可以通过npm安装：

npm install avue-crud --save

然后，在Vue组件中引入Avue-CRUD：

<template>
  <div>
    <avue-crud
      :columns="columns"
      :api="api"
      :form-options="formOptions"
      :table-options="tableOptions"
    ></avue-crud>
  </div>
</template>

<script>
import { AvueCrud } from 'avue-crud';

export default {
  components: {
    AvueCrud
  },
  data() {
    return {
      columns: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '年龄',
          prop: 'age'
        },
        // 其他列配置...
      ],
      api: {
        // 接口配置...
      },
      formOptions: {
        // 表单配置...
      },
      tableOptions: {
        // 表格配置...
      }
    };
  }
};
</script>

上述代码中，columns是表格的列配置，api是接口配置，formOptions是表单配置，tableOptions是表格配置。你可以根据自己的需求进行相应的配置。

接下来，我们来实现分页和表体的分离。首先，在Vue组件的data中添加一个变量pagination来保存分页信息：

data() {
  return {
    // ...
    pagination: {
      currentPage: 1,
      pageSize: 10,
      total: 0
    },
    // ...
  };
}

然后，在表格配置tableOptions中添加一个pagination属性来绑定分页信息：

tableOptions: {
  pagination: 'pagination', // 绑定分页信息
  // ...
}

最后，在接口配置api中添加相应的分页参数：

api: {
  // ...
  page: {
    currentPage: 'currentPage',
    pageSize: 'pageSize'
  }
}

现在，你就可以实现分页和表体分离的效果了。通过分页组件控制分页信息，Avue-CRUD会根据分页信息自动请求相应的数据，并将数据渲染到表格中。

希望以上内容能够帮助到你！