玩转vben后台管理系统：Table和Form组件使用技巧

2023-10-27 07:00:44

vben：强大而全面的管理界面构建工具

vben 是一款功能强大的 UI 框架，提供了一系列组件来帮助您轻松构建出色的后台管理系统。其中，Table 和 Form 组件是其核心组成部分，可以帮助您处理复杂的数据表格和表单管理任务。

vben Table 组件

1. 基本用法

要使用 vben Table 组件，您需要指定列和数据源。列定义了表格中的列，而数据源包含表格中显示的数据。以下是基本用法示例：

<template>
  <vben-table :columns="columns" :data="data" />
</template>

<script>
import { ref } from 'vue';
import { vbenTable } from 'vben-admin';

export default {
  setup() {
    const columns = [
      {
        title: '姓名',
        key: 'name',
      },
      {
        title: '年龄',
        key: 'age',
      },
    ];

    const data = [
      {
        name: '张三',
        age: 20,
      },
      {
        name: '李四',
        age: 22,
      },
    ];

    return {
      columns,
      data,
    };
  },
};
</script>

2. 复杂用法

vben Table 组件支持广泛的复杂用法，包括：

排序、筛选和分页
树形表格
展开行
行内编辑
自定义渲染

vben Form 组件

1. 基本用法

要使用 vben Form 组件，您需要指定模型和规则。模型定义表单中的数据，而规则用于验证输入。以下是基本用法示例：

<template>
  <vben-form :model="model" :rules="rules">
    <vben-form-item label="姓名">
      <vben-input v-model="model.name" />
    </vben-form-item>
    <vben-form-item label="年龄">
      <vben-input v-model="model.age" />
    </vben-form-item>
    <vben-form-item>
      <vben-button type="primary" @click="submit">提交</vben-button>
    </vben-form-item>
  </vben-form>
</template>

<script>
import { ref } from 'vue';
import { vbenForm, vbenFormItem, vbenInput, vbenButton } from 'vben-admin';

export default {
  setup() {
    const model = ref({
      name: '',
      age: '',
    });

    const rules = {
      name: [
        { required: true, message: '请输入姓名' },
      ],
      age: [
        { required: true, message: '请输入年龄' },
      ],
    };

    const submit = () => {
      console.log(model.value);
    };

    return {
      model,
      rules,
      submit,
    };
  },
};
</script>