前端起步扫盲：Avue-CRUD表单属性配置指南

2023-11-22 07:27:40

快速上手 Avue-CRUD 表单属性配置指南

理解 Avue-CRUD 表单属性

作为一名后端开发者，涉足前端开发时，表单属性配置难免让人头疼。但 Avue-CRUD 提供了全面且易懂的文档，让学习和上手变得轻松。在本文中，我们将深入探讨 Avue-CRUD 表单属性配置，并提供详细的示例，帮助你快速提升工作效率。

表格及列配置

Avue-CRUD 表单中表格和列的配置通过 columns 属性实现。每个列可配置多个属性，包括标题、键名、类型、宽度、对齐方式、排序和过滤等。

{
  title: '名称',
  key: 'name',
  type: 'string',
  width: 100,
  align: 'left',
  sortable: true,
  filterable: true
}

表单字段配置

表单字段的配置通过 form 属性实现。每个字段可配置标签、键名、类型、验证规则等属性。

{
  label: '名称',
  key: 'name',
  type: 'input',
  rules: [
    { required: false },
    { max: 20 }
  ]
}

CURD 属性配置

除了表格和表单配置外，Avue-CRUD 还提供了 CURD 属性配置，包括 data、submit 等，用于控制数据和表单提交行为。

代码示例

以下是 Avue-CRUD 表单属性配置的一个完整示例：

<template>
  <div>
    <avue-crud
      :columns="columns"
      :data="data"
      :form="form"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '名称',
          key: 'name',
          type: 'string',
          width: 100,
          align: 'left',
          sortable: true,
          filterable: true
        }
      ],
      data: [
        { name: 'John Doe' },
        { name: 'Jane Smith' }
      ],
      form: {
        label: '名称',
        key: 'name',
        type: 'input',
        rules: [
          { required: false },
          { max: 20 }
        ]
      }
    }
  }
}
</script>