如何在 vue-good-table 中进行单元格编辑？答案

【问题标题】：How to do cell editing in vue-good-table?如何在 vue-good-table 中进行单元格编辑？
【发布时间】：2021-07-22 17:19:46
【问题描述】：

我正在尝试创建一个可以直接在单元格中编辑数据的表格。但是，我不明白如何做到这一点。我正在使用 Vue.js、Vuexy 和 vue-good-table 2.21.1。数据包含在 mediaPlanData 变量中并且是反应性的。该表已成功填充数据并且可以修改。但是，当我更改单元格中的数据时，此变量不会更改。我在documentation vue-good-table 中没有找到如何做到这一点。请告诉我怎样才能达到预期的效果？

<vue-good-table
:columns="columns"
:rows="mediaPlanData"
:select-options="{
        enabled: true,
        selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
        selectionInfoClass: 'custom-class',
        selectionText: 'rows selected',
        clearSelectionText: 'clear',
        disableSelectInfo: true, // disable the select info panel on top
        selectAllByGroup: true, // when used in combination with a grouped table, add a checkbox in the header row to check/uncheck the entire group
        }"
@on-selected-rows-change="onRowClick"
>

<template slot="table-row" slot-scope="props">
    <span>
        <b-form-input v-model="props.row[props.column.field]"
                      type="text"
        ></b-form-input>
    </span>
</template>


</vue-good-table>

data() {
return {
    pageLength: 10,
    columns: [
        {
            label: 'Channel Code',
            field: 'channelCode',
        },
        {
            label: 'Product',
            field: 'product',
        }
    ],
    
    mediaPlanData: [] //[ {"channelCode": "P230", "product": "Test"}, {"channelCode": "P230", "product": "Test4"}, {"channelCode": "P230", "product": "Test45"}, {"channelCode": "Р230", "product": "Test2"}]
}
}
methods: {              
onRowClick(params) {
    console.log('onRowClick' + JSON.stringify(params))
    this.$toast({
        component: ToastificationContent,
        props: {
            title: `Hello user! You have clicked on row ${params.selectedRows.product}`,
            icon: 'UserIcon',
            variant: 'success',
        },
    })
}
}

【问题讨论】：

标签： vue.js vue-good-table

【解决方案1】：

我已经解决了这个问题。添加到 b-form-input

@change="changeCell(props.row[props.column.field], props.column.field, props.row.originalIndex)"

加法

changeCell(changedData, column, row) {
            this.mediaPlanData[row][column] = changedData
        },

【讨论】：