(Vue3 组合式Api) Element Plus表格双击单元格编辑

        页面效果展示：

        双击单元格显示输入框可编辑，当失去鼠标移除输入框失焦时，不显示输入框效果：

         同时添加两个功能，点击添加参数按钮可在表格中添加新行，选择某行，点击删除参数即可删除所选行。

代码部分：

                                    <el-table :data="selectTableData" border
                                        style="margin: 20px 6px; width: 560px; height: 320px;"
                                        :row-style="{ height: '40px' }" highlight-current-row
                                        @cell-dblclick="handleCellDoubleClick" @current-change="handleCurrentChange">
                                        <el-table-column prop="value1" label="喉栓位移(mm)" width="280px">
                                            <template #default="{ row }">
                                                <el-input v-if="row.isEditPara1" v-model="row.value1"
                                                    style="width: 235px;" @blur="handleInputBlur(row)"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="value2" label="喷管等效喉部面积(mm2)" width="280px">
                                            <template #default="{ row }">
                                                <el-input v-if="row.isEditValue" v-model="row.value2"
                                                    style="width: 235px;" @blur="handleInputBlur(row)"></el-input>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div style="display: flex;justify-content:space-evenly; margin-top: 20px">
                                        <el-button class="sub-btn" @click="addParameter" type="primary">添加参数</el-button>
                                        <el-button class="sub-btn" @click="deleteParameter" type="primary">删除参数</el-button>
                                    </div>

const selectTableData = ref([
    {
        value1: '12.3',
        value2: '1.23',
        isEditPara1: false,
        isEditValue: false
    },
    {
        value1: '234.4',
        value2: '3.23',
        isEditPara1: false,
        isEditValue: false
    },
]);

const handleCellDoubleClick = (row: any, column: any, cell: any, event: any) => {
    if (column.property === 'value1') {
        row.isEditPara1 = true;
    } else if (column.property === 'value2') {
        row.isEditValue = true;
    }
};

const handleInputBlur = (row: any) => {
    row.isEditPara1 = false;
    row.isEditValue = false;
};

const addParameter = () => {
    selectTableData.value.push({
        value1: '',
        value2: '',
        isEditPara1: false,
        isEditValue: false
    });
};

const currentRow = ref(null); // 存储当前选中行的数据

const handleCurrentChange = (newRow: any, oldRow: any) => {
    // 当选中行变化时，更新 currentRow 的值
    currentRow.value = newRow;
};

const deleteParameter = () => {
    // 检查是否有选中的行
    if (currentRow.value) {
        const index = selectTableData.value.findIndex((row) => row === currentRow.value);
        if (index !== -1) {
            selectTableData.value.splice(index, 1); // 删除选中行
            currentRow.value = null; // 重置当前选中行
        }
    } else {
        alert("请选择要删除的行");
    }
};