vue3 elementplus el-table 针对表格可编辑问题

这是在上面修改 html

<el-table :data="tableData" @current-change="handleCurrentRow" highlight-current-row :height="pxToRem(570)" border>
    <el-table-column prop="id" label="id" min-width="85" show-overflow-tooltip />
    <el-table-column
        v-for="item in tableHead"
        :prop="item.itemName"
        :label="item.itemName"
        min-width="85"
        show-overflow-tooltip
    >
        <template #default="scope">
            <div
                v-if="rowIndex == scope.$index && colIndex == scope.cellIndex && isEdit"
                :class="{ 'current-edit-table': isEdit }"
            >
                <div class="input-row" 
:class="{ 'is-tag': scope.row[`${item.itemName}Tag`] }"
 v-if="item.itemType == 'Enum'">
                    <el-select autofocus @blur="blurEdit(scope, item)"
 v-model="scope.row[item.itemName]" placeholder="Select">
                        <el-option v-for="item in item.enumValues" :key="item" :label="item" :value="item" />
                    </el-select>
                </div>
                <div class="select-row" :class="{ 'is-tag': scope.row[`${item.itemName}Tag`] }" v-else>
                    <el-input autofocus @blur="blurEdit(scope, item)" v-model="scope.row[item.itemName]"></el-input>
                </div>
            </div>
            <div v-else class="message jc-flex-row jc-flex-items-center" @click="changeEdit(item, scope)">
                {{ scope.row[item.itemName] }} <tip-btn v-if="!item.readOnly" tip="edit" name="icon_table_edit " class="icon" />
            </div>
        </template>
    </el-table-column>
</el-table>

数据

// 后台返回的数据格式
// var data = {
//     code: 0,
//     data: {
//         head: [
//             { enumValues: [], itemName: 'name', itemType: 'String', lenght: 255, pKey: false, readOnly: false },
//             { enumValues: ['男', '女'], itemName: 'sex', itemType: 'Enum', lenght: 0, pKey: false, readOnly: true },
//             { enumValues: [], itemName: 'age', itemType: 'Integer', lenght: 0, pKey: false, readOnly: true }
//         ],
//         page: {
//             content: [
//                 { sex: '男', name: 'meng', id: 1, age: 8 },
//                 { sex: '男', name: 'shuo', id: 2, age: 18 }
//             ],
//             empty: false,
//             first: true,
//             last: true,
//             number: 0,
//             numberOfElements: 2,
//             pageable: {
//                 offset: 0,
//                 pageNumber: 0,
//                 pageSize: 20,
//                 paged: true,
//                 sort: { empty: true, sorted: false, unsorted: true },
//                 unpaged: false
//             },
//             size: 20,
//             sort: { $ref: '$.data.page.pageable.sort' },
//             totalElements: 2,
//             totalPages: 1
//         }
//     },
//     message: null
// }

js

<script setup>
/ 点击页面移除 table 输入框
onBeforeUnmount(() => {
    document.removeEventListener('click', removeTableSelect)
})

const catchTableData = ref([])
const changeTableData = ref([]) // 已修改的table数据

// 失去焦点
const blurEdit = () => {
    isEdit.value = false
    document.removeEventListener('click', removeTableSelect)
  
if (tableData.value[scope.$index][item.itemName] != catchTableData.value[scope.$index][item.itemName]) {
    //如果数据修改追加数据 并修改原数据加标识颜色
    tableData.value[scope.$index][`${item.itemName}Tag`] = true
} else {
    tableData.value[scope.$index][`${item.itemName}Tag`] = false
}
// 遍历如果有就加进去没有则替换
if (changeTableData.value.length == 0) {
    changeTableData.value.push(JSON.parse(JSON.stringify(tableData.value[scope.$index])))
} else {
    changeTableData.value.forEach((item, index) => {
        console.log(item)
        if (tableData.value[scope.$index].id == item.id) {
            console.log(88)
            changeTableData.value[index] = JSON.parse(JSON.stringify(tableData.value[scope.$index]))
        } else {
            console.log(99)
            changeTableData.value.push(JSON.parse(JSON.stringify(tableData.value[scope.$index])))
        }
    })
}

}
const removeTableSelect = (e) => {
    console.log(666666666, e)
    e.stopPropagation()
    let nowClassName = e.target.className
    console.log(99999999, e.path.includes(document.getElementsByClassName('current-edit-table')[0]))
    console.log(99999999, e.path)
    console.log(9987654, document.getElementsByClassName('current-edit-table')[0])
    if (!e.path.includes(document.getElementsByClassName('current-edit-table')[0])) {
        //点击类名为 current-edit-table之外的地方，隐藏弹框
        isEdit.value = false
        document.removeEventListener('click', removeTableSelect)
    }
}
/**
 * @author : JC0871 2023/08/16 17:59:53
 * @description: 切换按钮到编辑状态
 */
const rowIndex = ref() // 行参数
const colIndex = ref() // 列
const isEdit = ref(false) //是否可编辑
const changeEdit = async (item, scope) => {
    console.log(scope)

    if (item.readOnly) {
        return
    } else {
    isEdit.value = true
    rowIndex.value = scope.$index
    colIndex.value = scope.cellIndex
    console.log(scope)
    await nextTick()
    setTimeout(() => {
        document.addEventListener('click', removeTableSelect)
    }, 100)
    }
}

ps: 代码纯属记录工作中遇到的问题或者组件

也可直接引入地方放框架vxe-table