小编Ale*_*ngt的帖子

我有几个带有服务器端分页、搜索字段和可过滤字段的数据表

但是，我希望能够生成一个组件并使用道具来避免修改相同的东西三次

有没有办法用来自 vuetify 的数据表（使用 v-slot dynamic）来循环模板？

例如 ：

<template v-slot:header.id="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('id')">
            ID
            <v-icon class="ml-2">{{icon.id}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_id.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>


<template v-slot:header.name="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('name')">
            Nom du ticket
            <v-icon class="ml-2">{{icon.name}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_name.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

成为（非功能性）：

<template v-for="(item, i) in headers" v-slot:item.text="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy(item.name)">
            {{item.name}}
            <v-icon class="ml-2">{{icon[item.name]}}</v-icon>
        </span>
        <v-text-field v-model="item.searcher" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

如果我添加 …

这是我的代码：

    public function list()
    {
        $users = User::with('group')->get()->toArray();
        return response()->json([

            'clients' => array_filter($users, function ($r) {
                return $r['group']['name'] === 'client';
            }),

            'employes' => array(array_filter($users, function ($r) {
                return $r['group']['name'] !== 'client';
            })),

        ]);
    }

这是回应：

{
  "clients": {
    "2": {
      "id": 3,
      "name": "Client 1",
      "email": "client@a.fr",
      "email_verified_at": null,
      "created_at": null,
      "updated_at": null,
      "group_id": 4,
      "group": {
        "id": 4,
        "name": "client"
      }
    },
    "3": {
      "id": 4,
      "name": "Client 2",
      "email": "client2@a.fr",
      "email_verified_at": null,
      "created_at": null,
      "updated_at": null,
      "group_id": 4, …

我需要在 mixin 中为我的组件定义规则。

这是我的请求的一个简单示例

https://jsfiddle.net/alexisgt01/0tg4ovnz/2/

编码 ：

<v-text-field :rules="[nbRules, requiredRules]" outlined v-model="name" label="Nom du ticket" required></v-text-field>

...

requiredRules: [
  v => !!v || 'Le champs est obligatoire',
],
nbRules: [
  v => v.length <= 10 || 'Name must be less than 10 characters',
],

但是，根据文档

接受将输入值作为参数并返回真/假或带有错误消息的字符串的函数数组

，我有可能传递一个数组，但在那里，我有错误：

Rules should return a string or boolean, received 'object' instead

我还尝试使用计算为的属性：

customRules(nb = 10) {
    const rules = [];

    if (nb) {
        const rule =
            v => (v || '').length <= nb || …