Elementui テーブルはインライン編集を実装します

効果は次のとおりです。

「変更」をクリックすると入力ボックスが表示され、「OK」または「キャンセル」をクリックすると入力ボックスが消えます。

実装プロセス:

html部分

<el-table v-loading="loading" :data="list">
    <el-table-column :label="$t('common.index')" type="index" width="60px" />
    <el-table-column :label="$t('deviceParams.paramsName')" align="center" prop="name" />
    <el-table-column :label="$t('deviceParams.cnname')" align="center" prop="cnname" />
    <el-table-column :label="$t('deviceParams.pValue')" align="center" prop="value">
       <template slot-scope="scope">
            <el-input v-model="scope.row.value :placeholder="$t('deviceParams.pValuePla')" clearable v-if="scope.row.isEdit" />
            <span v-else>{
   
   { scope.row.value }}</span>
        </template>
    </el-table-column>
    <el-table-column :label="$t('common.operate')" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-if="!scope.row.isEdit">
                {
   
   { $t("common.editBtn") }}
            </el-button>
            <el-button size="mini" type="text" v-if="!scope.row.isEdit">
                {
   
   { $t("common.syncBtn") }}
            </el-button>
            <el-button size="mini" type="text" @click="submitForm(scope.row)" v-if="scope.row.isEdit">
                {
   
   { $t("common.confirmBtn") }}
            </el-button>
            <el-button size="mini" type="text" @click="cancel(scope.row)" v-if="scope.row.isEdit">
                {
   
   { $t("common.cancelBtn") }}
            </el-button>
        </template>
    </el-table-column>
</el-table>

js部分：

data() {
    return {
        currentValue: '',
    };
},
methods: {
        /** 查询列表 */
        getList() {
            this.loading = true;
            // 执行查询
            getDeviceConfigPage(this.queryParams).then(response => {
                this.list = response.data.list.map(res => {
                    return {
                        isEdit: false,
                        ...res
                    }
                });
                this.total = response.data.total;
                this.loading = false;
            });
        },
        /** 取消按钮 */
        cancel(row) {
            row.isEdit = false;
            row.value = this.currentValue;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.currentValue = row.value;
            row.isEdit = true;
        },
        /** 提交按钮 */
        submitForm(row) {
            let params = JSON.parse(JSON.stringify(row));
            updateDeviceConfig(params).then(response => {
                this.$modal.msgSuccess(this.$t('common.editSuccess'));
                this.getList();
            });
        },
}