The process of using vxe-table to make editable tables in vue

npm install xe-utils@3 vxe-table@3

import 'xe-utils';
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
​
Vue.use(VXETable);

<template>
    <vxe-table :align="allAlign" :data="tableData">
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="name" title="Name"></vxe-table-column>
        <vxe-table-column field="desc" title="Description"></vxe-table-column>
        <vxe-table-column field="link" title="Link"></vxe-table-column>
    </vxe-table>
</template>
<script>
    export default {
        data () {
            return {
                allAlign: null,
                tableData: [
                    {
                        name: "html",
                        desc: 'Hypertext Markup Language',
                        link: 'https://www.runoob.com/html/html-tutorial.html'
                    },
                    {
                        name: "css",
                        desc: 'Cascading Style Sheets',
                        link: 'https://www.runoob.com/css/css-intro.html'
                    },
                    {
                        name: "js",
                        desc: 'JavaScript',
                        link: 'https://www.runoob.com/js/js-tutorial.html'
                    }
                ]
            }
        }
    }
</script>

<template>
    <!--Add edit-config configuration to the table-->
    <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}">
        <!--Reform the cell vxe-table-column and use edit-render to configure the editing properties--->
        <vxe-table-column title="Description" width="180" fixed="left" field="desc"
                          :edit-render="{name: 'input', attrs: {type: 'text'}}">
        </vxe-table-column>
    </vxe-table>
</template> 

<template>
    <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}">
        <!--The only difference between the edit-render and input box editing is the configuration of edit-render. The new option selection is added in data--->
        <vxe-table-column title="Whether to display" width="180" field="isShow"
                          :edit-render="{name: 'select', options: selection, optionProps: {value: 'status', label: 'label'}}">
        </vxe-table-column>
    </vxe-table>
</template>
<script>
    export default {
        data () {
            return {
                allAlign: null,
                tableData: [
                    {
                        name: "html",
                        desc: 'Hypertext Markup Language',
                        link: 'https://www.runoob.com/html/html-tutorial.html',
                        isShow: 1
                    }
                    //Omit multiple pieces of data········
                ],
                selection: [
                    {status: 1, label: 'Yes'},
                    {status: 0, label: 'No'}
                ]
            }
        }
    }
</script>

<vxe-table-column field="name" width="120" title="Name"
                  :edit-render="{name: 'input', attrs: {type: 'text'}}">
    <!--Use #header to customize the header -->
    <template #header>
        <span>Name</span>
        <span style="font-size: 12px; color: #ccc">Technology</span>
    </template>
    <!--Use #default to customize content-->
    <template #default="{row}">
        <span>Technology Name</span>
        <span>{{row.name}}</span>
    </template>
    <!--Use #edit to customize the editing -->
    <template #edit="{row}">
        <p>Technology name</p>
        <input type="text" v-model="row.name" class="vxe-default-input">
    </template>
</vxe-table-column>

<template>
    <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}"
               @edit-closed="updateData">
        <vxe-table-column title="Whether to display" width="180" field="isShow"
                          :edit-render="{name: 'select', options: selection, optionProps: {value: 'status', label: 'label'}}">
        </vxe-table-column>
    </vxe-table>
</template>
<script>
    export default {
        data () {
            // Omit...
        },
        methods: {
            updateData ({ row, column }) {
                // The background update interface accepts one piece of data, so just pass row console.log(row);
            }
        }
    }
</script>

editClosedEvent ({ row, column }) {
    const $table = this.$refs.xTable
    const field = column.property
    const cellValue = row[field]
    // Determine whether the cell value has been modified if ($table.isUpdateByRow(row, field)) {
        setTimeout(() => {
            this.$XModal.message({
                content: `Partial save successful! ${field}=${cellValue}`,
                status: 'success'
            })
            // Partially update the cell to the saved state $table.reloadRow(row, null, field)
        }, 300)
    }
}