vue + element plus 實現可編輯table

<el-table :data="tableData">

    <el-table-column label="序號" type="index"></el-table-column> 

    <el-table-column label="位置"> 
        <template #default="scope"> 
           <el-input :model-value="scope.row.positionCode" @input="value => handleInputChange(value, scope.row.index)"> 
        </template> 
     </el-table-column> 
</el-table>

可通過table插槽實現，需要使用model-value進行綁定，v-model綁定會出現不能單個綁定、一列值均發生變化的情況，通過觸發input事件為table單元格賦值

js

data() {
    return{
       tableData: []
    }
}

methods: {
　　// table動態生成多少條數據
　　countChange (num) {
　　　　this.currentData = []
　　　　var index = 0
　　　　var obj = {}
　　　　for(var i = 0; i < num; i++){
　　　　　　index++
　　　　　　obj = {
　　　　　　　　index: index,
　　　　　　　　positionCode: null
　　　　　　}
　　　　　　this.currentData.push(obj)
　　　　}
　　}

    handleInputChange(val, index){ 
　　　　this.currentData[index - 1].positionCode = val
　　}
}