【Vue Good Table】 在搜索表格时，如何清除已经选中的项目？

检查了Vue Goods Table的源码，发现在搜索函数执行搜索之前会先重置表的选择。 这么做可能有其他原因，但对用户来说，用户看到表中的行并单击选中，然后搜索选择其它行。

Html代码：

<!-- the same search UI as the vue-good-table -->
<div class="tt-search vgt-global-search vgt-clearfix"><div class="vgt-global-search__input vgt-pull-left"><span class="input__icon"><div class="magnifying-glass"></div></span> <input type="text" v-model="searchTerm" v-on:keyup="searchingTable" placeholder="Filter this table by First name, Last name, or registration date" class="vgt-input vgt-pull-left"></div> <div class="vgt-global-search__actions vgt-pull-right"></div></div>

<!-- vue-good-table component below -->
<vue-good-table
    @on-row-click="rowClicked"
    :columns="columns"
    :rows="patients"
    :row-style-class="rowStyleClassFn"
    :search-options="{
        enabled: true,
        placeholder: 'Filter this table by First name, Last name, or registration date',
        externalQuery: searchTerm
    }
    ">
    <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field == 'fname'" v-bind:id="'user-row-' + props.row.user_id">
            {{props.formattedRow[props.column.field]}}
        </span>
    </template>
</vue-good-table>

这里使用了 template slot填完绑定user_id作为id的span元素。

在 methods中添加：

rowClicked: function(params){
    if(params.event.target.parentElement.classList.contains('selected')){ // 判断是否被选择
        params.event.target.parentElement.classList.remove('selected'); // 移除
        var newArray = this.virtualMeetInvitees.filter(function(obj){ 
            return obj.user_id !== params.row.user_id; // 去除掉已经点击过的行 
        });
        this.virtualMeetInvitees = newArray; // 重新赋值
    } else {
        this.virtualMeetInvitees.push(params.row); //如果没有选择，添加 
        params.event.target.parentElement.classList.add('selected'); // 高亮行
    }
},
searchingTable: function(){ // 在搜索框输入（包括清除）时激发 
    if(this.virtualMeetInvitees.length){
        this.$nextTick(()=>{
            this.virtualMeetInvitees.forEach((obj)=>{ // loop over each invitee 
                var row = document.getElementById('user-row-' + obj.user_id); // find row that matches our invited invitee 
                if(row){ // simple guard to ensure it's there (it should be but whatever)
                    row.parentElement.parentElement.classList.add('selected');
                }
            });
        });
    }
}

关键之一是删除复选框，只需使整个行可单击即可。在rowCliced()方法中，可以访问表中提供给该行的任何内容。在我们的示例中，我们将行的对象添加到数据实例中。

另一个关键是使用Vue Goods Table的外部搜索查询。使用它，我们定义了自己的搜索输入(但是使用了Vue Goods Table的HTML+类，这样行看起来就像Vue Goods Table的本地搜索输入一样)。在这个自定义输入上，searchingTable()允许我们捕获每个键，包括在清除搜索字段时。