Question

这是一个关于vue及其v-table的问题，特别是它的v-client-table

此示例包含名称为宠物和生日的过滤器，但不包括年龄，编辑或删除。 https://jsfiddle.net/f5h8xwgn/299/

我需要类似的东西，但我无法重现项目中的影响。我有3列：名称，活动和编辑 - 编辑只是一堆按钮 - 我不需要排序或过滤按钮。

这是我的代码：

<v-client-table :data="filteredList"
    :columns="['name', 'active', 'edit']" :options="options"
    >
    <template slot="name" scope="props">
        <div v-if="props.row.editing">
            <textbox v-model="editName"></textbox>
        </div>
        <div v-else>{{ props.row.name }}</div>    
    </template>

    <template slot="active" scope="props">
        <div v-if="props.row.editing">                            
            <select class="form-control" v-model="editActive">
                <option v-bind:value="1">Active</option>
                <option v-bind:value="0">Inactive</option>
            </select>                            
        </div>

        <div v-else>
            <div v-if="props.row.active">Active</div>
            <div v-else>Inactive</div>
        </div>
    </template>

    <template slot="edit" scope="props">
        <div class="text-right">                        
            <button type = "button" 
                 @click="editFabricator(props.row)" 
                 class="btn btn-primary">
                <div v-if="props.row.editing">Cancel</div>
                <div v-else>Edit</div>
            </button> 
            <button v-if="props.row.editing" 
                type = "button" 
                @click="saveEdit(props.row.id)" class="btn btn-primary">
                Save
            </button>
        </div> 
    </template>


</v-client-table>

这是我的选择

options: {
    filterByColumn: true,
    headers: {
        name: 'Name',
        active: 'Active',
        edit: 'Edit',
    },
    listColumns: {
        active: [{
          id: '0',
          text: 'Inactive'
        }, {
          id: '1',
          text: 'Active'
        }]
      },
}

声明表时，jsfiddle编辑中的示例中的

未列在：列列表中，但仍显示在表中。如果我从：columns列表中删除编辑，它会从表中删除编辑列，无论我做什么，我都无法显示它。如果我把编辑放在：列列表中，那么列就在那里，但它有一个过滤器。这是我不想要的。

这是一个laravel项目。不确定这是否有所作为。

Answer 1

在选项下添加要过滤的列，使用可过滤选项。

{
    "options": {
        "filterByColumn": true,
        "filterable": [
            "name",
            "active"
        ],
        "headers": {
            "name": "Name",
            "active": "Active",
            "edit": "Edit"
        },
        "listColumns": {
            "active": [
                {
                    "id": "0",
                    "text": "Inactive"
                },
                {
                    "id": "1",
                    "text": "Active"
                }
            ]
        }
    }
}

https://matanya.gitbook.io/vue-tables-2/options-api

V-client-table filterbycolumn如何使过滤器适用于某些但不是所有列？

1 个答案: